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.

stroke-dashoffset 属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。

メモ: プレゼンテーション属性である stroke-dashoffset は、CSS プロパティとして使用することができます。

この属性は以下の SVG 要素で使用することができます。

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>

使用上のメモ

<percentage> | <length>
既定値 0
アニメーション

オフセットは通常 pathLength に対して解決されたユーザー単位で表現されますが、 <percentage> が使用された場合、値は現在のビューポートに対するパーセント値として解決されます。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# StrokeDashoffsetProperty

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-dashoffset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support