【CSS Modules】stroke-dashoffsetプロパティの使い方
stroke-dashoffsetプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
stroke-dashoffsetプロパティは、SVG（Scalable Vector Graphics）要素に適用される線の破線パターンの開始オフセットを保持するプロパティです。SVGで描画される線（ストローク）に対し、stroke-dasharrayプロパティで定義された破線パターン（線と空白の繰り返し）の描画開始位置をどれだけずらすかを制御します。
このプロパティに指定できる値は、具体的な長さ（例えばピクセルやemなどの単位）か、SVGパスの全長に対するパーセンテージです。負の値を指定することも可能で、その場合、破線パターンは定義された方向とは逆向きに移動して表示されます。例えば、パスの全長と同じ値を負の方向へオフセットさせることで、線が完全に隠れるように設定することもできます。
具体的な利用例として、stroke-dashoffsetプロパティの値を時間経過とともに変化させることで、SVGの線がまるで自身で描かれていくかのように見せる、いわゆる「ドローイングアニメーション」をCSSのtransitionやanimationプロパティと組み合わせて実現できます。これは、ウェブサイトのデザインやインタラクティブな要素によく用いられる表現手法です。
このプロパティは、path、line、polyline、rect、circle、ellipseなど、ストロークを持つ様々なSVG図形要素に適用可能です。初期値は0であり、破線パターンがずれることなく、線の開始位置からそのまま描画されます。SVGを使ったグラフィック表現において、視覚的な効果を高めるために重要なプロパティの一つです。
構文(syntax)
1.selector { 2 stroke-dashoffset: 10px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません