SVG／アニメーション

属性の時間変化（animate）
複数の属性を変化させる
時間を区切って別の属性を変化させる
２つのアニメーションの時間同期
属性変更（set）
座標系の時間変化（animateTransform）
座標回転のアニメーション
パス軌跡の移動（animateMotion）

属性の時間変化  animate 要素

属性
attributeName 変化させるグラフィックの属性名
from 変化させる属性の開始値
to 変化させる属性の終了値
begin 変化開始時間（単位は秒=s、分=min、時=h、ミリ秒=ms）
dur 変化時間（単位は begin と同様）
repeatCount 繰り返し回数（無限の場合は indefinite）
fill 終了時の属性値
freeze：終了状態で止まる
remove：初期値に戻す
id アニメーションの名称
グラフィックの属性の変化を指定します。
attributeNameに変化させたい属性を指定し、その値の変化前後とそれを変化させる時間を指定します。
通常のグラフィックの要素は
<グラフィック要素名/>
のようにXMLのタグ1つの中で完結する書き方をしますが、animateは親要素に対して適用するので、
<グラフィック要素名>
    <animate ... 変化の設定... />
</グラフィック要素名>
のようにグラフィック要素の中に内包する書き方をします。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50"
        stroke-width="1" stroke="blue" fill="none">
        <animate attributeName="r"
            from="10" to="40"
            begin="0s" dur="5s"
            repeatCount="indefinite" fill="freeze"/>
    </circle>
</svg>
Picture Picture

複数の属性を変化させる

<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10">
        <animate attributeName="width"
            from="20" to="70"
            begin="0s" dur="5s"
            fill="freeze"/>
        <animate attributeName="height"
            from="20" to="70"
            begin="0s" dur="5s"
            fill="freeze"/>
        <animate attributeName="fill"
            from="lime" to="navy"
            begin="0s" dur="5s"
            fill="freeze"/>
    </rect>
</svg>
Picture Picture Picture

時間を区切って別の属性を変化させる

時間を区切って順番に変化させることができます。次の例では、前半2秒で横に伸びて、後半3秒で元に縮みます。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" height="15">
        <animate attributeName="width"
            from="20" to="50"
            begin="0s" dur="2s" fill="freeze"/>
        <animate attributeName="width"
            from="50" to="20"
            begin="2s" dur="3s" fill="freeze"/>
    </rect>
</svg>
Picture Picture Picture

２つのアニメーションの時間同期

アニメーションのid属性に、仮に「an1」という名前をつけたとき、そのアニメーションが完了するタイミングをan1.endと表すことができます。そしてan1.endの1秒後をan1.end+1sのように表します。
次の例は、最初に小さい紫の円の半径が拡大していき、拡大が止まって1秒後にオレンジの円が縮小していきます。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50"
        stroke-width="1" stroke="purple" fill="none">
        <animate id="cp" attributeName="r"
            from="10" to="30"
            begin="0s" dur="2s" fill="freeze"/>
    </circle>
    <circle cx="50" cy="50"
        stroke-width="1" stroke="orange" fill="none">
        <animate attributeName="r"
            from="30" to="10"
            begin="cp.end+1s" dur="2s" fill="freeze"/>
    </circle>
</svg>
Picture Picture Picture Picture

属性変更  set 要素

あるタイミングにグラフィックの属性を設定し変更します。
開始〜終了間を次第に変化させるのではなく、ある時点になったら突然属性を変更します。見た目が瞬間的に変化します。
setでは、fromは使わずtoのみに変更する属性値を与えます。fromを使わない以外の属性はanimateと共通です。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="30"
        stroke-width="1" stroke="blue" fill="ivory">
        <set attributeName="fill" to="violet"
            begin="2s" dur="2s" fill="freeze"/>
    </circle>
</svg>
Picture Picture
fillをremoveにすると、紫になって更に2秒後に元の白に戻ります。

座標系の時間変化  animateTransform 要素

属性
attributeName 変化させるグラフィックの属性名
この場合はtransform固定
from 変化させる座標系変換の開始値
to 変化させる座標系変換の終了値
type 座標系変換方法の種類
translate 座標系のオフセット移動
scale 座標系の拡大縮小
rotate 座標系の回転
skewX X座標軸を傾ける
skewY Y座標軸を傾ける
グラフィックの座標系を変換するtransform属性の変化を指定します。
animate要素と共通の属性が使えますが、座標系変換方法を指定するためのtype属性が加わります。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="15"
        stroke-width="1" stroke="brown" fill="none">
        <animateTransform attributeName="transform"
            type="translate"
            from="0, 0" to="50, 50"
            begin="0s" dur="5s" fill="freeze"/>
    </circle>
</svg>
Picture Picture Picture

座標回転のアニメーション

<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" x="25" y="25"
        stroke-width="1" stroke="teal" fill="none">
        <animateTransform attributeName="transform"
            type="rotate"
            from="0, 50, 50" to="360, 50, 50"
            begin="0s" dur="10s"
            repeatCount="indefinite" fill="freeze"/>
    </rect>
</svg>
Picture Picture Picture

パス軌跡の移動  animateMotion 要素

属性
path 輪郭を描画するpath要素のd属性のコマンド
rotate auto：グラフィックがパスと平行になるよう回転する。
dur 移動時間（単位は秒=s、分=min、時=h、ミリ秒=ms）
repeatCount 繰り返し回数（無限は indefinite）
fill 終了時の属性値
freeze 終了状態で止まる
remove 初期値に戻す
パスの軌跡奇跡に沿ってグラフィックを移動させます。
animateと同様に、グラフィック要素の中に内包する書き方をします。from、toの代わりに、path属性へpath要素のd属性と同様に指定します。
親要素のグラフィックは、そのパスに沿ってdur属性の時間をかけて移動します。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <rect width="10" height="10" x="0" y="0"
        stroke-width="1" stroke="red" fill="none">
        <animateMotion
            path="M 10,20 Q 60,0 80,60"
            rotate="auto"
            dur="5s" fill="freeze"/>
    </rect>
</svg>
Picture Picture Picture Picture