stroke-dashoffset
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年3月.
stroke-dashoffset 屬性指定一個數值至虛線的開頭。
如果使用 <percentage>，值則會代表當前 viewport 的百分比。
值允許為負值。
Usage context
| 類別 | Presentation attribute |
|---|---|
| 可用值 | <percentage> | <length> | inherit |
| 初始值 | 0 |
| 可動畫化 | 是 |
| 規範文件 | SVG 1.1 (2nd Edition) |
範例
HTML 內容
html
<svg
width="200"
height="200"
viewBox="0 0 200 200"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line
stroke-dashoffset="0"
stroke-dasharray="20"
x1="0"
y1="10"
x2="200"
y2="10" />
<line
stroke-dashoffset="10"
stroke-dasharray="20"
x1="0"
y1="20"
x2="200"
y2="20" />
<line
stroke-dashoffset="20"
stroke-dasharray="20"
x1="0"
y1="30"
x2="200"
y2="30" />
<line
stroke-dashoffset="50%"
stroke-dasharray="20"
x1="0"
y1="40"
x2="200"
y2="40" />
<line
stroke-dashoffset="25%"
stroke-dasharray="20"
x1="0"
y1="50"
x2="200"
y2="50" />
<line
stroke-dashoffset="0%"
stroke-dasharray="20"
x1="0"
y1="60"
x2="200"
y2="60" />
</svg>
CSS 內容
css
line {
stroke: #51bba7;
stroke-width: 2;
}
結果
適用元素
以下元素可以使用 stroke-dashoffset 屬性
規範
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |
瀏覽器相容性
Loading…