stroke-dashoffset

« SVG 屬性引用首頁

stroke-dashoffset 屬性指定一個數值至虛線的開頭。

如果使用 <percentage> ，值則會代表當前 viewport 的百分比。

值允許為負值。

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