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

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《为什么 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 相同，但后一个圆形看起来更粗，因为它的填充会覆盖第一个圆形的描边。

终于介绍完啦！小伙伴们，这篇关于《为什么 SVG 中相同样本粗细的圆形看起来宽度不同？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！