SVG 中两个重叠圆的边框宽度为何不同？

svg 两个叠加圆的边框宽度差异解析

在 svg 中绘制两个相叠的圆，可能会出现这样一个疑问：为什么两个拥有相同 stroke-width 属性的圆，实际呈现出来的边框宽度却不同？

下面的代码展示了如何绘制两个重叠的圆：

<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>

登录后复制

你会发现，第二个圆的边框比第一个圆的要粗。这是因为 stroke 属性默认居中描边。而在 svg 中，填充 (fill) 发生在描边之前。这意味着，第二个圆的填充覆盖了第一个圆的一部分描边，从而导致后者的边框看起来更细。

如果将两个圆分开绘制，就会清晰地看到这一点：

因此，为了绘制具有相同边框宽度的叠加圆，需要将第二个圆的填充区域缩小，使其不覆盖第一个圆的描边。

以上就是SVG 中两个重叠圆的边框宽度为何不同？的详细内容，更多请关注GTHOST其它相关文章！