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 January 2020.
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 |
瀏覽器相容性
BCD tables only load in the browser