
svg 中相同样本粗细的圆形为什么宽度不同?
考虑以下代码:
这两个圆形叠加在一起,但后一个圆形似乎比前一个更粗。这是什么原因造成的?
答案
在 svg 中,stroke(描边)是居中描边的。默认的填充规则是先填充(fill),再描边(stroke),也就是说,描边的部分会在填充的上面。
这意味着第二个圆形的填充会覆盖第一个圆形的一部分描边。如下面所示:
[图片展示了两个圆形分开的情况,第二个圆形的填充覆盖了第一个圆形的部分描边]
因此,虽然两个圆形的 stroke-width 相同,但后一个圆形看起来更粗,因为它的填充会覆盖第一个圆形的描边。










