概要

stroke-dashoffsetは、SVG（Scalable Vector Graphics）の線の描画開始位置を調整するためのCSSプロパティです。主にアニメーション効果を実現するために使われ、線が徐々に描かれていくような視覚効果を演出できます。この記事では、stroke-dashoffsetの基本的な使い方とアニメーションの具体例について詳しく解説します。

stroke-dashoffsetの基本構文

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

stroke-dashoffset: 数値;

• 数値: 線の描画開始位置をずらす量を指定します。正の値で線を描画の開始方向に、負の値で終了方向にずらします。

使用例

基本的な使用例

以下の例では、stroke-dasharrayとstroke-dashoffsetを組み合わせて、線の開始位置をずらしています。

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="10, 5" stroke-dashoffset="10" />
</svg>

• この例では、stroke-dashoffsetを10に設定することで、線の描画開始位置が10px分ずれています。これにより、最初の線分が非表示になり、線の開始が間隔部分から始まるようになります。

アニメーション効果を追加する

stroke-dashoffsetを使ってアニメーション効果を実装することもできます。次の例では、線が徐々に描かれるようなアニメーションを作成しています。

<svg width="200" height="100">
  <line class="animated-line" x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="180" />
</svg>
<style>
  .animated-line {
    stroke-dashoffset: 180;
    animation: draw 2s linear forwards;
  }
  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

• この例では、stroke-dasharrayの値を線の長さと同じ180に設定し、stroke-dashoffsetも同じ180にすることで、線がすべて隠れた状態から始まります。アニメーションによりstroke-dashoffsetが0に向かって減少し、線が徐々に描かれるように見えます。

具体的な使用シーン

stroke-dashoffsetは以下のようなシーンで効果的に使えます。

• ロード時に描画されるアニメーション効果
  ロゴやアイコンが徐々に描かれていく効果を演出する際に使用します。
• インフォグラフィックやデータビジュアライゼーション
  グラフやチャートが動的に描画されるようなインタラクティブなアニメーションで用いられます。
• ルートの描画
  地図上で道筋が徐々に描かれていくような効果を再現することができます。

stroke-dashoffsetとstroke-dasharrayの組み合わせ

stroke-dashoffsetは単独では線の位置を調整するだけですが、stroke-dasharrayと組み合わせることで、より複雑なパターンやアニメーションを実現できます。例えば、長さや間隔を変化させながら、描画の開始位置を変更することで、ユニークな動きを作り出せます。

まとめ

stroke-dashoffsetは、SVGの線を視覚的に操作し、線のアニメーションや独自のスタイルを作り出すための強力なプロパティです。特にアニメーション効果において、その価値を発揮し、単なる線を動きのあるデザイン要素へと変えることができます。これを活用して、ウェブデザインに新たな表現を取り入れてみましょう。