html - 什么是 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。 我想知道笔划宽度是否被添加到半径中，或者我对它的渲染感到困惑。有人需要解释 svg 背后的概念或将我引导到一些页面以便我可以深入学习

Answer 1

SVG stroke 属性

• stroke 属性定义线条、文本或轮廓的颜色 一个元素

SVG stroke-width 属性

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

检查这个 w3schools article对于 svg 属性

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

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

当您添加 stroke-width = 150 时，这意味着 stroke-width 半径需要更大才能处理。 Chrome 将圆显示为 100x100 确实如此，圆半径不会改变，只有笔画半径会改变。

为了证明，只需将 stroke-width 更改为 500px，您就会清楚地看到这是如何工作的，并且您会理解这一点。

这也称为错误，因此您在这个 link 中有这个 Unresolved 问题