SVGのストロークアニメーション：1本の描画経路を準備する

SVGのストロークアニメーションは、パス上の破線を動かして線を表示できます。stroke-dasharrayで破線と隙間を定義し、stroke-dashoffsetをアニメーションしてストロークを表示します。MDNはこれらをストロークの描画プロパティとして説明しています。

描かれるように見える経路は、元のパスで決まります。開いたパスはマークの中央を通るペンの経路に沿えます。塗りの輪郭はマークの境界を表します。その輪郭へストロークを付けると、端を回るアニメーションになります。破線の設定だけでは塗りは表示制御できません。

ロゴ全体のタイミングを決める前に、小さな1つの形から始めます。以下の手書き例は、描画経路、塗り画像、周囲の境界を分け、アニメーションに必要な形状を選べるようにします。

アイコン全体を曲線に沿って動かすには、移動経路と画像を分けるSVGのモーションパス手順を使います。

開いたストロークのパスから始める

独自のパスは右へ進み、次に上へ進みます。fillを無効にし、見えるマークをすべてストロークで描きます。

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

2秒間の表示には、次のCSSを使います。

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100"は、距離に基づく操作を、指定した長さ100へ補正します。pathLengthリファレンスは、この正規化を説明しています。dash-arrayの単一値は破線と隙間として繰り返すため、100は全長の破線と同じ長さの隙間を与えます。この例では100のオフセットでストロークが隠れ、ゼロへ動かすと表示されます。

ここでは単位なしの数値を使います。stroke-dashoffset: 100%は、正規化したパス単位100の代わりにはなりません。MDNのdash-offsetリファレンスは、パーセントがパス全長ではなくSVGビューポートの正規化した対角線を使うと説明しています。

この例は、停止した開始状態を確認しやすいようbuttの線端を使います。他の線端は破線の端の見た目を変えます。画像に合う線端を選び、アイコンが実際に表示されるサイズで最初と最後のフレームを確認します。装飾の繰り返しには、破線と隙間の長さを選ぶ前に点線輪郭と線端の間隔を比較します。

経路と塗りの輪郭を比較する

太い折れ曲がった帯は、ストロークの線に似て見えても形状が異なります。この2つ目の手書きパスは帯の境界を回り、Zで閉じます。

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

次の描画設定では、破線のオフセットを変えても見た目は変わりません。

.filled {
  fill: #ef8067;
  stroke: none;
}

破線にするストロークがないため、帯の塗りは残ります。W3CのSVG描画仕様は、形の内部の塗りとストロークの描画を区別しています。

代わりにfill: noneとストロークを設定し、閉じたパスをアニメーションすると、片側の辺に沿って進み、終端を横切って、反対側の辺を戻ります。帯の中心を通る1本の経路にはなりません。

この違いは、トレースで二重のカット線ができる理由にもなります。アニメーションでは、ペンのマークの外側を回る不要な線になる場合があります。中心の経路が必要なら、単線SVGのガイドで形状を確認・準備します。

開始、中間、終了を確認する

例を一時停止して確認するには、アニメーションを無効にし、stroke-dashoffsetを100、50、0にします。この正規化したパスでは、開始、半分の表示、最終状態に対応します。CSSプロパティへ入力するパーセントではありません。

3つの版を、各状態のボタン付きの小さなテストページに置きます。中間の設定は特に役立ちます。完成形は似ていても、表示の途中では描画経路の違いが明確です。

ブラウザーで手書きパスをオフセット100、50、0で確認し、2秒のアニメーションを1回実行しました。塗りの帯は見えたままで、経路と境界は異なる表示になりました。独自のパスを示すテストで、PerfectVectorのトレースや、すべてのブラウザーのテストではありません。

結果が違うなら、実際の要素の描画設定と計算済みスタイルを調べます。CSSはプレゼンテーション属性を上書きでき、見えるストロークがないパスは破線での表示を実演できません。タイミング調整の前に、ストローク欠落の確認事項で描画と表示の問題を切り分けます。

開始点とパスの順序を決める

最初のパスはM30 90から始まり、水平にx=100へ、次に垂直にy=30へ進みます。その順序が表示の方向になります。上端から描きたいなら、アニメーションがペンの意図した動きを分かると想定せず、その方向のパスを準備します。

別々のマークがあるロゴでは、最初に出すパスとその後のパスを決めます。すべてに同じアニメーションを開始すると同時表示になります。順番には、明示的な遅延や別のタイムラインが必要です。後の形が描画途中のストロークを覆う場合があるため、停止状態で交差と重なりを確認します。

複数の分離したサブパスがある描画は、有用なタイミング制御のため要素に分ける必要がある場合があります。見た目のデザインと経路の判断を分けます。1本のパスにするためだけに無関係な部分を結ぶと、作者が意図しない接続が生じる場合があります。

アニメーションライブラリは順序を制御できますが、入力には適した形状が必要です。MotionのSVGアニメーションドキュメントは、アニメーションするpathLength値による線描画を提供します。その制御は、ここで使うネイティブSVGのpathLength="100"補正とは別のAPIです。APIを確認せず値を流用しないでください。

動きなしでも完成画像を見せる

CSS例は、既定でオフセットをゼロとし、アニメーション実行中だけ変えます。動きを減らすメディアクエリーは表示アニメーションを無効にし、完成した線を見せます。MDNのprefers-reduced-motionガイドがユーザー設定の検出を説明しています。

対話型デモには、再生ボタンに加え静止結果の操作を提供します。UIアイコンには、操作を説明する見えるラベルやアクセシブルな名前を保持します。アニメーションだけが画像の意味を知る方法にならないようにします。

実際の配置で、初期、中断、完了状態を試します。アニメーションが実行しないと重要なアイコンが隠れたままなら、UI全体へ効果を広げる前に基本スタイルを直します。単独デモの成功は、すべてのブラウザー、支援技術、性能の結果を保証しません。

ペンの経路を約束せず、ラスター画像を準備する

ベクターマスターがなく、平面的なPNGやJPGのマークに編集可能な画像が必要なら、PerfectVectorの画像をベクターに変換する手順でSVG候補を準備できます。輪郭、穴、別々の領域を元画像と比較し、ダウンロードしたパスをエディターで確認します。アニメーションを計画する前に、その形状を確認用画像として扱います。

ベクター化は、元のペン順を特定したり、タイムラインを作ったり、単一の中心線パスを保証したりはしません。ストロークを通る1本の経路が必要なら、意図して描くか準備します。既存マスターがあれば保持します。ラスターを埋め込むだけのSVGには、見えるマークが編集可能なパスと想定する前に、埋め込み画像の確認も必要です。

まず静止画像を確認して採用し、その後、線が描かれていくアニメーションを確認して採用します。ブログの編集ガイドは、アニメーションの前段階の整理を扱っています。

よくある質問

ストロークアニメーションの開始時にもSVGが見えるのはなぜですか？ 見える部分が塗りか確認します。dash-arrayとdash-offsetはストロークに影響するため、ストロークが隠れても塗り領域は見える場合があります。

線の両側を回って描かれるのはなぜですか？ 太いマークの周囲の閉じた輪郭をパスが表す可能性があります。そのストロークは境界に沿います。中心の1本の線が必要なら、開いた描画経路を準備します。

パス全長に100%を使えますか？ stroke-dashoffsetの一般的な代用にはなりません。パーセントはビューポートの正規化した対角線を参照します。この例はネイティブのpathLength="100"と単位なしの破線値を使います。

PNGをSVGへ変換すると、手書きアニメーションに使えますか？ ベクター化からペン順や中心線が自動的に保証されるわけではありません。結果の形状を確認し、描画パスとタイミングを別に準備します。

参考資料

1. MDN — stroke-dasharray — ストロークの破線と隙間の交互の長さ。
2. MDN — stroke-dashoffset — パターンのオフセットとパーセントの基準。
3. MDN — pathLength — パスとストロークのネイティブな距離補正。
4. W3C — SVGの描画 — 塗りとストロークの動作の区別。
5. MDN — prefers-reduced-motion — 静止結果に使うユーザー設定。
6. Motion — SVGアニメーション — ライブラリ独自の線描画API。

全体を順序付ける前に、1つの経路の開始、中間、終了を試します。元がラスターのマークなら、編集可能なSVG候補を準備し、形状を確認して、描画経路を別に計画します。