概要

stroke-dasharrayは、SVG（Scalable Vector Graphics）の線を点線や破線にするためのCSSプロパティです。このプロパティを使用することで、線の描画パターンを自由にカスタマイズでき、デザインの幅を広げることができます。この記事では、stroke-dasharrayの基本的な使い方と具体例について詳しく解説します。

stroke-dasharrayの基本構文

stroke-dasharrayの構文は以下の通りです。

stroke-dasharray: 数値1, 数値2, ...;
  • 数値1: 線の長さ
  • 数値2: 線と線の間隔
  • 数値を複数指定することで、線の長さと間隔のパターンを繰り返すことができます。

使用例

基本的な使用例

以下の例では、線を5pxの長さと5pxの間隔で交互に繰り返す点線に設定しています。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="5, 5" />
</svg>
  • この例では、線の長さ5pxと間隔5pxを繰り返すことで、均等な点線を作成しています。

線のパターンを変更する

複数の数値を指定することで、線のパターンをより複雑に設定できます。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="10, 5, 2, 5" />
</svg>
  • この例では、線の長さ10px、間隔5px、短い線2px、再び間隔5pxのパターンが繰り返されます。これにより、より独自性のある破線が作成されます。

stroke-dasharrayをCSSで指定する

CSSを使ってSVGのスタイルを変更することも可能です。

<svg width="200" height="100">
  <line class="dashed-line" x1="10" y1="50" x2="190" y2="50" />
</svg>
<style>
  .dashed-line {
    stroke: black;
    stroke-width: 4;
    stroke-dasharray: 8, 4;
  }
</style>
  • クラスを使って線のスタイルを定義し、線の長さ8pxと間隔4pxの破線を作成しています。

具体的な使用シーン

stroke-dasharrayは以下のような場面で役立ちます。

  • グラフやチャートの線を視覚的に区別する
    折れ線グラフの異なるデータセットを破線で区別する際に使います。
  • 地図上のルートや境界線の表現
    路線図や地図上のルートを点線や破線で表現することで、視覚的に強調できます。
  • デザイン要素の装飾
    枠線やボーダーに装飾的な効果を加える際にも使用できます。

備考

  • 数値のパターンは繰り返し適用されるため、指定する数値が多いほど複雑な線のパターンが作成されます。
  • stroke-dasharrayはSVGの線だけに適用されるため、一般的なHTML要素のボーダーなどには適用できません。線の装飾を行いたい場合はSVGを使用する必要があります。

まとめ

stroke-dasharrayは、線を単なる実線から点線や破線に変化させることで、デザインのバリエーションを増やすための強力なツールです。簡単に線のパターンを変更できるため、グラフや地図、装飾など、さまざまな場面で活用できます。自由なパターンを組み合わせて、視覚的に豊かなデザインを作成してみましょう。

参照:

stroke-dasharray | MDN