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.
Please take two minutes to fill out our short survey.
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 |