MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

stroke-dashoffset

翻譯不完整。請協助 翻譯此英文文件

« SVG 屬性引用首頁

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

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

值允許為負值。

Usage context

Categories Presentation attribute
Value <percentage> | <length> | inherit
Initial value 0
Animatable Yes
Normative document 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 屬性

文件標籤與貢獻者

 此頁面的貢獻者: bing-Guo
 最近更新: bing-Guo,