什么是SVG中的笔画和笔画宽度以及它在HTML中的呈现方式？

Question

<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>

我刚开始学习SVG，我对笔画和笔画宽度及其呈现方式感到困惑。 在开发人员工具中，每当我增加笔划宽度时它看起来都很奇怪，圆圈保持区域增加但尺寸总是100x100。 我想知道是否将笔划宽度添加到半径中，或者我对其渲染感到困惑。有人需要解释svgs背后的概念或将我引导到某些页面以便我可以深入学习

Answer 1

SVG描边属性

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

SVG stroke-width属性

• stroke-width属性定义线条，文本或的粗细 元素轮廓

检查此w3schools article svg属性

  

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

     

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

向您显示的问题是，您可以应用于半径为50px的圆的最大笔触宽度为100px，因此这是一个简单的数学运算。 r=50px的最大笔画宽度为2*r，因此为100px。

当你添加stroke-width = 150时，意味着行程宽度半径需要更大才能进行。 Chrome将圆圈显示为100x100，圆圈半径不会仅改变笔划半径变化。

要证明只需将笔画宽度更改为500px，您就会清楚地看到它是如何工作的，您将理解这一点。

这也称为错误，因此您在此link

中遇到了这个未解决的问题