stroke-dashoffset
Usage context
類別 | Presentation attribute |
---|---|
可用值 | <percentage> | <length> | inherit |
初始值 | 0 |
可動畫化 | 是 |
規範文件 | SVG 1.1 (2nd Edition) |
範例
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 內容
line{
stroke: #51BBA7;
stroke-width: 2;
}
結果
適用元素
以下元素可以使用 stroke-dashoffset
屬性
規範
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty |
瀏覽器相容性
BCD tables only load in the browser