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.

« SVG 屬性引用首頁

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

瀏覽器相容性

BCD tables only load in the browser