为什么 SVG 中相同样本粗细的圆形看起来宽度不同？

svg 中相同样本粗细的圆形为什么宽度不同？

考虑以下代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="gray" stroke-width="10" fill="#fff"/>
  <circle cx="100" cy="50" r="40" stroke-dasharray="50% 50%" stroke="black" stroke-width="10" fill="#fff"/>
</svg>

这两个圆形叠加在一起，但后一个圆形似乎比前一个更粗。这是什么原因造成的？

答案

在 svg 中，stroke（描边）是居中描边的。默认的填充规则是先填充（fill），再描边（stroke），也就是说，描边的部分会在填充的上面。

这意味着第二个圆形的填充会覆盖第一个圆形的一部分描边。如下面所示：

[图片展示了两个圆形分开的情况，第二个圆形的填充覆盖了第一个圆形的部分描边]

因此，虽然两个圆形的 stroke-width 相同，但后一个圆形看起来更粗，因为它的填充会覆盖第一个圆形的描边。