svg 两个叠加圆的边框宽度差异解析
在 svg 中绘制两个相叠的圆,可能会出现这样一个疑问:为什么两个拥有相同 stroke-width 属性的圆,实际呈现出来的边框宽度却不同?
下面的代码展示了如何绘制两个重叠的圆:
你会发现,第二个圆的边框比第一个圆的要粗。这是因为 stroke 属性默认居中描边。而在 svg 中,填充 (fill) 发生在描边之前。这意味着,第二个圆的填充覆盖了第一个圆的一部分描边,从而导致后者的边框看起来更细。
如果将两个圆分开绘制,就会清晰地看到这一点:

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










