svg 圆形边框宽度不同的疑惑
在 svg 中绘制两个圆形并叠加时，开发者经常遇到一个问题：即使两个圆形的边框宽度（stroke-width）相同，但实际显示的宽度却不一样。
原因分析
要了解其中的原因，需要深入了解 svg 的描边和填充机制。
svg 中的描边是居中的，而填充则是在描边后面进行的。这意味着，第二个圆形的填充覆盖了第一个圆形的某些部分，导致其描边的宽度发生了变化。
示例代码
<svg> <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-linecap 属性： stroke-linecap 属性控制描边的结束样式，将 stroke-linecap 设置为 square 或者 butt 就可以防止这种情况发生。
- 保持圆形的顺序： 更改两个圆形的绘制顺序。先绘制第二个圆形，再绘制第一个圆形，这样第二个圆形的填充就不会覆盖第一个圆形的描边了。
以上就是SVG 中圆形边框宽度不一致的原因是什么？的详细内容，更多请关注GTHOST其它相关文章！
