什么是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中風屬性

• stroke屬性定義元素的線條，文本或輪廓的顏色

SVG stroke-width屬性

• stroke-width屬性定義元素的線條，文本或輪廓的粗細

查看這篇w3schools 文章了解svg屬性

SVG是基於XML的，這意味着SVG DOM中的每個元素都可用。 您可以為元素附加JavaScript事件處理程序。

在SVG中，每個繪制的形狀都被記住為一個對象。 如果更改了SVG對象的屬性，則瀏覽器可以自動重新渲染形狀。

向您顯示的問題是，您可以應用於半徑為50px的圓的最大筆觸寬度為100px，因此這是一個簡單的數學運算。 r=50px最大行程寬度為2*r因此它是100px 。

當你添加stroke-width = 150時，這意味着行程寬度半徑需要更大才能得到它。 Chrome將圓圈顯示為100x100 ，圓形半徑不會僅改變筆划半徑的變化。

要證明只需將筆划寬度更改為500px ，您就會清楚地看到它是如何工作的，您將理解這一點。

這也稱為bug，因此您在此鏈接中有這個未解決的問題