SVG中的笔划和笔划宽度是什么？它在HTML中是如何呈现的？

我刚刚开始学习SVG，我对笔划和笔划宽度以及它们的渲染方式有点困惑。 在开发工具中，每当我增加笔划宽度时，它看起来很奇怪，圆形保持区域增加，但尺寸始终为100x100。

---

我想知道是笔划宽度被添加到半径中，还是我对其渲染感到困惑。需要有人解释SVG背后的概念，或指导我阅读一些页面，以便我能够深入了解SVG笔划属性

• 笔划属性定义线条、文字或轮廓的颜色 元素

SVG笔划宽度属性

• 笔划宽度属性定义线条、文字或线条的厚度 元素的轮廓

检查此选项以了解svg属性

SVG是基于XML的，这意味着每个元素在 svgdom。可以为元素附加JavaScript事件处理程序

在SVG中，每个绘制的形状都作为一个对象被记住。如果属性 如果SVG对象发生更改，浏览器可以自动重新渲染 形状

向你们展示的这个问题是因为你们可以应用于半径为50px的圆的最大笔划宽度是100px，所以这是一个简单的数学。

r=50px

的最大笔划宽度是

2*r

，因此它是

100px

当您添加笔划宽度=150时，这意味着笔划宽度半径需要更大才能处理该问题。Chrome将圆显示为

100x100

，没错，圆半径不会改变，只是笔划半径会改变

为了证明这一点，只需将笔划宽度更改为

500px

，您就会清楚地看到这是如何工作的，并且您会理解这一点

---

这也被称为bug，所以你在这篇文章中有一个公开的问题，我知道，但是当笔划宽度为100时，圆圈是如何消失的，当笔划宽度为150时，圆圈又是如何出现的。我想知道这件事mechanicsm@3yRuL3z你现在明白了还是你想得到更多的解释？是的，我明白了。。笔划在由圆心和半径定义的圆的轮廓上“居中”：一半笔划在圆的内侧，一半在圆的外侧，因此，当笔划宽度增加时，圆的明显“外部”大小会增加。这与一行相同：当你增加笔划宽度时，它会变大。谢谢，现在我已经理解了你的解释

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="5" fill="yellow"></circle></svg>

<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="50" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="100" fill="yellow"></circle></svg>


<svg width="400" height="400" style="background-color:green">

   <circle cx="200" cy="200" r="50" stroke="red" stroke-width="150" fill="yellow"></circle></svg>