stroke-dashoffset
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 |
ブラウザーの互換性
BCD tables only load in the browser