【CSS Modules】stroke-dasharrayプロパティの使い方

stroke-dasharrayプロパティは、SVG（Scalable Vector Graphics）の図形要素や、CSSの特定プロパティにおいて、線（ストローク）を破線で描画する際のパターンを定義するプロパティです。このプロパティを使用することで、単一の実線ではなく、一定の長さの線と空白を交互に繰り返す視覚効果を持つ線を表示させることができます。

値としては、カンマ（,）またはスペース（ ）で区切られた一つ以上の数値のリストを指定します。これらの数値は、破線の「線（ダッシュ）の長さ」と「空白（ギャップ）の長さ」を交互に定義します。例えば、「5 3」と指定すると、5単位の線、3単位の空白、5単位の線、3単位の空白というパターンが繰り返し描画されます。長さの単位にはピクセル（px）やemなどが使用できますが、単位を省略した場合はユーザー空間の単位（通常はピクセルに相当）として解釈されます。

指定する値の数が奇数個の場合、ブラウザはそのリスト全体を複製して偶数個のリストとして扱います。例えば、「5 10 15」と指定すると、実際には「5 10 15 5 10 15」というパターンとして解釈され、最初の5が線、10が空白、15が線、その次の5が空白、10が線、15が空白という順序で繰り返されます。この柔軟な指定方法により、多様な破線デザインを実現できます。

このプロパティは、主に<line>、<path>、<circle>、<rect>などのSVG要素のstrokeプロパティと組み合わせて、図形をより表現豊かに描画する際に利用されます。初期値はnoneであり、この場合は破線ではなく実線として描画されます。

Copy
1.example-element {
2  stroke-dasharray: 10 5;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません