魅せるUIを実現！SVGパスアニメーションの実装テクニック

SVGアニメーションとCSSトランジションの連携テクニック

SVG（Scalable Vector Graphics）は、ベクター形式で描画される画像で、HTMLの一部として直接記述できます。
SVGの要素はDOMとして扱えるため、CSSやJavaScriptでの操作も可能です。アニメーションには主に以下の2種類があります。

• SMILアニメーション（<animate>タグなど）：SVG内部で指定された動作
• CSSトランジション／アニメーション：CSSで外部からスタイルを変化させる

1. SMILによるSVGアニメーション

SMIL（Synchronized Multimedia Integration Language）はSVGの内部タグで、図形の属性値（例えば、rやfill）を時間的に変化させることができます。

例：以下のコードは円（circle）の半径rを10から50にアニメーションさせ、繰り返します。

<circle ...>
  <animate attributeName="r" from="10" to="50" dur="1s" repeatCount="indefinite" />
</circle>

原理： `attributeName=”r”`で対象属性（半径）を指定し、`from`と`to`で開始・終了値、`dur`でアニメーション時間、`repeatCount`で繰り返し回数を指定します。

2. CSSトランジションをSVGに適用する

SVGはHTMLと同じようにclassを持てるため、CSSでスタイルを変化させることができます。
トランジションは:hoverなどの疑似クラスと組み合わせるとユーザー操作に連動したアニメーションを実現できます。

.hover-circle {
  transition: fill 0.4s ease;
}
.hover-circle:hover {
  fill: orange;
}

原理： `transition`は、SVGのスタイル属性（fill, stroke, transformなど）に変化があったとき、その変化を時間をかけて実行します。

3. transformによる回転アニメーション

SVG要素にもtransformを適用できます。マウスホバー時に回転するアニメーションをCSSトランジションで実装できます。

#rotate-rect {
  transition: transform 0.5s ease;
  transform-origin: 60px 60px;
}
#rotate-rect:hover {
  transform: rotate(45deg);
}

原理： SVGでの回転は、回転中心（transform-origin）を指定しないと意図しない位置で回ってしまいます。

4. SMIL + CSSトランジションの併用

SMILで自動的にアニメーションしたあと、CSSでユーザー操作による変化を加えることも可能です。

<animate attributeName="r" from="10" to="40" dur="2s" fill="freeze" />

.animated-circle {
  transition: stroke 0.5s ease;
}
.animated-circle:hover {
  stroke: red;
}

原理： `fill=”freeze”`により、アニメーション完了後に最後の状態（r=40）を保持します。CSSのhoverはその後の操作として機能します。

5. JavaScriptでアニメーション制御

CSSトランジションでは制御が難しい「クリック時の切り替え」などは、JavaScriptでクラスを付け替えて行います。

// JavaScript
document.getElementById('js-box').addEventListener('click', function () {
  this.querySelector('rect').classList.toggle('active');
});

原理： JavaScriptでクラスを追加・削除することで、CSSのトランジションを間接的に操作できます。

補足：CSSでアニメーション可能なSVG属性

CSSでトランジションまたはアニメーションできる属性は限られています。代表的なものは以下の通りです：

• fill（塗りの色）
• stroke（線の色）
• opacity（透明度）
• transform（回転・拡大縮小・平行移動）

一方、cxやrなどの座標属性はCSSトランジションでは直接操作できないため、SMILかJavaScriptで制御する必要があります。