stroke-width
stroke-width CSS 屬性定義了應用於 SVG 形狀的描邊寬度。如果存在，它會覆蓋元素的 stroke-width 屬性。
此屬性適用於任何 SVG 形狀或文字內容元素（請參閱 stroke-width 以獲取完整列表），但作為繼承屬性，它可以應用於諸如 <g> 等元素，並且仍然對後代元素的描邊產生預期效果。如果該值評估為零，則不繪製描邊。
語法
css
/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;
/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;
值
<length>-
畫素單位的處理方式與 SVG 單位相同（參見上文的
<number>），而基於字型的長度（例如em）則根據元素的文字大小的 SVG 值進行計算；其他長度單位的效果可能取決於瀏覽器。 <percentage>-
百分比指的是當前 SVG 視口歸一化對角線，計算方法為.
<number>非標準-
SVG 單位的數值，其大小由當前單位空間定義。
正式定義
正式語法
stroke-width =
[ <length-percentage> | <number> ]#
<length-percentage> =
<length> |
<percentage>
示例
各種描邊寬度
此示例演示了 stroke-width 屬性的各種值語法。
HTML
首先，我們設定了五條多段路徑，所有路徑都使用寬度為一的黑色描邊，並且沒有填充。每條路徑都建立了一系列山形符號，從左（淺角）到右（極角）。
html
<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
<g stroke="black" stroke-width="1" fill="none">
<path
d="M1,5 l7 ,-3 l7 ,3
m2,0 l3.5 ,-3 l3.5 ,3
m2,0 l2 ,-3 l2 ,3
m2,0 l0.75,-3 l0.75,3
m2,0 l0.5 ,-3 l0.5 ,3" />
<path
d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
<path
d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
</g>
</svg>
CSS
對於前四條路徑，我們將描邊寬度值成對應用，以顯示裸數字值和畫素值在功能上是等效的。對於前兩條路徑，值為 .25 和 .25px。對於後兩條路徑，值為 1 和 1px。
對於第五條也是最後一條路徑，應用了 5% 的值，從而將描邊寬度設定為 SVG 視口對角線長度的百分之五。
css
path:nth-child(1) {
stroke-width: 0.25;
}
path:nth-child(2) {
stroke-width: 0.25px;
}
path:nth-child(3) {
stroke-width: 1;
}
path:nth-child(4) {
stroke-width: 1px;
}
path:nth-child(5) {
stroke-width: 5%;
}
結果
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # stroke-width |
瀏覽器相容性
載入中…