SVG中相同描边宽度的圆圈，为什么看起来宽度不同？

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《SVG中相同描边宽度的圆圈，为什么看起来宽度不同？》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

svg中相同描边宽度的圆圈，不同宽度原因

在一个svg文档中，绘制了两个同心圆圈，尽管都设置了相同的描边宽度（10），但第二个圆圈却显得更宽。这是为什么呢？

答案在于svg的描边和填充规则。

在svg中，描边（stroke）围绕填充（fill）绘制，采用居中对齐的方式。这意味着描边的一部分将覆盖填充区域，而另一部分将位于填充区域之外。

默认情况下，svg采用“填充后描边”的规则。这意味着，在渲染圆圈时，首先填充内部区域（白色），然后才绘制描边（灰色和黑色）。

由于第二个圆圈具有破折号线样式（stroke-dasharray="50% 50%"），因此填充会在黑色描边的间隙中显示为白色。这使得黑色描边的视觉效果更宽，尽管实际描边宽度与灰色描边相同。

若要解决此问题，可以使用“描边后填充”规则。通过设置 fill-rule 属性为 evenodd，可以将描边放置在填充区域的上面。

修改后的代码如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" fill-rule="evenodd">
  <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>

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。