什么是SVG中的描边和描边宽度，以及如何在HTML中呈现它？

Question

什么是SVG中的描边和描边宽度，以及如何在HTML中呈现它？

3

<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。我想知道线宽是否被添加到半径上，或者我对其渲染有误解。有人需要解释一下SVG图像背后的概念，或者引导我找一些学习资源。

- Yogi

2

描边位于由圆心和半径定义的圆形轮廓上，“居中”：一半描边在圆形内部，一半在外部，因此当描边宽度增加时，圆形的表面“外观”尺寸也会增大。这与单线相同：当你增加描边宽度时，它会变得更大。 - jcaron

谢谢，我现在已经理解了，感谢您的解释。 - Yogi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edison Biba · Accepted Answer

SVG描边属性

描边属性定义了元素的线条、文本或轮廓的颜色。

SVG描边宽度属性

描边宽度属性定义了元素的线条、文本或轮廓的厚度。

查看w3schools 文章以获取有关SVG属性的更多信息。

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

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

你遇到的问题是因为半径为50px的圆最大描边宽度为100px，所以这只是一个简单的数学问题。当r = 50px时，最大描边宽度为2 * r，因此为100px。

当你添加描边宽度=150时，这意味着描边半径需要更大才能处理它。Chrome将圆形显示为100x100，这是正确的，圆形半径不会改变，只有描边半径会改变。

为了证明这一点，只需将描边宽度更改为500px，您将清楚地看到它是如何工作的，并且您将理解这一点。

这也被称为错误，因此您可以在此链接中找到此问题的解决方法。