stroke-dasharray
stroke-dasharray CSS 屬性定義了在繪製 SVG 形狀的描邊時使用的虛線和間隙模式。如果存在，它將覆蓋元素的 stroke-dasharray 屬性。
此屬性適用於任何 SVG 形狀或文字內容元素（參見 stroke-dasharray 獲取完整列表），但作為繼承屬性，它可以應用於諸如 <g> 等元素，並且仍然對後代元素的描邊產生預期效果。
語法
/* Keywords */
stroke-dasharray: none;
/* Numeric, length, and percentage values */
stroke-dasharray: 2px, 5px;
stroke-dasharray: 20%, 50%;
stroke-dasharray: 2, 5;
/* The following two rules are equivalent */
stroke-dasharray: 2, 5, 3;
stroke-dasharray: 2, 5, 3, 2, 5, 3;
/* Global values */
stroke-dasharray: inherit;
stroke-dasharray: initial;
stroke-dasharray: revert;
stroke-dasharray: revert-layer;
stroke-dasharray: unset;
值
該值是一個由逗號和/或空格分隔的 <number>、<length> 和/或 <percentage> 值組成的列表，這些值指定交替的虛線和間隙的長度，或者關鍵字 none。如果給出奇數個值，則整個值將重複以設定偶數個值。
none-
描邊將不繪製任何虛線。預設值。
<number>-
SVG 單位的數量，其大小由當前單位空間定義。負值無效。
<length>-
畫素單位的處理方式與 SVG 單位相同（參見上文的
<number>），基於字型的長度（例如em）是根據元素的文字大小的 SVG 值計算的；其他長度單位的效果可能取決於瀏覽器。負值無效。 <percentage>-
百分比指的是當前 SVG 視口歸一化對角線，計算方法為。負值無效。
正式定義
正式語法
stroke-dasharray =
none |
[ <length-percentage> | <number> ]+#
<length-percentage> =
<length> |
<percentage>
示例
基本虛線陣列
此示例演示了使用空格分隔的 <number> 值來基本使用 stroke-dasharray 屬性。
HTML
首先，我們設定一個基本的 SVG 矩形形狀。為此矩形應用一個寬度為 2 的紅色描邊。
<svg viewBox="0 0 100 50" width="500" height="250">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
我們為描邊定義一個虛線模式：十個單位的虛線，然後是五個單位的間隙。這意味著虛線之間的間隙將是虛線本身長度的一半。
rect {
stroke-dasharray: 10 5;
}
結果
在描邊轉彎處，圖案也隨之延伸。在左上角，描邊的起點和終點相遇處，十個單位長的起始虛線似乎與路徑末尾看到的虛線圖案部分連線，形成了一個看起來比十個單位更長的線條，在角落處彎曲。
虛線陣列重複
此示例包含一個由逗號分隔的奇數個 <number> 值，以演示在給出奇數個值時，如何重複該值以設定偶數個值。
HTML
在這種情況下，我們定義兩個矩形。
<svg viewBox="0 0 100 100" width="500" height="500">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
<rect
x="10"
y="60"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
對於第一個矩形，我們定義了一個 5, 5, 1 的虛線陣列，它要求五個單位的虛線，五個單位的間隙，以及一個單位的虛線。然而，由於這是一個奇數個數字，整個數字集會重複，從而建立一個與應用於第二個矩形相同的值。
rect:nth-of-type(1) {
stroke-dasharray: 5, 5, 1;
}
rect:nth-of-type(2) {
stroke-dasharray: 5, 5, 1, 5, 5, 1;
}
結果
需要偶數個數字的原因是，每個虛線陣列都以虛線開頭並以間隙結尾。因此，定義的模式是五單位虛線、五單位間隙、一單位虛線、五單位間隙、五單位虛線和一單位間隙。在生成的描邊中，兩個五單位虛線之間每次出現的一單位間隙都表示虛線陣列重新開始的位置。
百分比和畫素值
此示例演示了在 stroke-dasharray 屬性值中使用 <percentage> 和 <length> 值。
HTML
與上一個示例一樣，我們定義了兩個矩形。
<svg viewBox="0 0 100 100" width="500" height="500">
<rect
x="10"
y="10"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
<rect
x="10"
y="60"
width="80"
height="30"
fill="none"
stroke="red"
stroke-width="2" />
</svg>
CSS
這次，我們不使用純數字集合，而是使用畫素單位和百分比。
rect:nth-of-type(1) {
stroke-dasharray: 5px, 5px, 1px;
}
rect:nth-of-type(2) {
stroke-dasharray: 5%, 5%, 1%;
}
結果
結果與上一個示例中的結果基本沒有區別。
規範
| 規範 |
|---|
| CSS 填充與描邊模組 Level 3 # stroke-dasharray |
瀏覽器相容性
載入中…