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 ⁨2020年3月⁩.

stroke-dashoffset 屬性是一個表現屬性，用來定義相關虛線陣列在算繪時的偏移量。

備註： 作為一個表現屬性，stroke-dashoffset 也有一個對應的 CSS 屬性：stroke-dashoffset。當兩者都被指定時，CSS 屬性會優先採用。

你可以將此屬性與下列 SVG 元素一起使用：

範例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 沒有虛線陣列 -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- 沒有虛線偏移 -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
  虛線陣列的計算起點被拉回 3 個使用者單位
  -->
  <line
    x1="0"
    y1="5"
    x2="30"
    y2="5"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="3" />

  <!--
  虛線陣列的計算起點被向後推 3 個使用者單位
  -->
  <line
    x1="0"
    y1="7"
    x2="30"
    y2="7"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="-3" />

  <!--
  虛線陣列的計算起點
  被拉回 1 個使用者單位，最終算繪結果
  與前一個範例相同
  -->
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="1" />

  <!--
  下方的紅線突顯了每條線的虛線陣列偏移量
  -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgb(255 0 0 / 50%)" />
</svg>