図形にアニメーションを付ける

SVGで図形にアニメーションを付けるには、animate要素を使用します。
animate要素は図形要素の子要素として指定します。

  • ※ IE11以下は対応していません。

構文

<animate />

属性

属性名 初期値 説明
attributeName アニメーションする対象の属性名。
attributeType auto attributeName属性で指定した属性名とその属性値が定義される名前空間。
指定可能な値は次の通り。
CSS ... 属性がCSSプロパティ名
XML ... 属性がXML
auto ... CSSかXMLかを自動判別
begin アニメーションを開始するタイミング。
時間を指定するかclickなどイベント名を指定する。
例:begin="2s"  begin="click"
指定する値の書式は時間指定の書式項目を参照。
end アニメーションを終了する時間。
指定する値の書式は時間指定の書式項目を参照。
from attributeNameで指定した属性のアニメーションを開始する値。
to attributeNameで指定した属性のアニメーションを終了する値。
dur 1回のアニメーションする時間。
指定する値の書式は時間指定の書式項目を参照。
repeatCount 1 アニメーションを繰り返す回数。
指定可能な値は0以上で負の値は指定しても無視される。
repeatDur アニメーションを開始してからrepeatCount分繰り返した合計時間の範囲でのアニメーション時間。
例えば、dur="3s"(3秒)、repeatCount="3"(3回繰り返す)、repeatDur="7s"(7秒)とした場合、アニメーションを開始してから終了までの時間は9秒だが、アニメーションを開始してから7秒後(3回目のアニメーションの1秒後)に停止することになる。
fill remove アニメーション終了後の状態。
指定可能な値は次の通り。
freeze ... 停止時に停止時の状態を維持する
remove ... 停止時にアニメーションする前の状態に戻る
restart always アニメーションを任意のタイミングで再開することの制御。
指定可能な値は次の通り。
always ... 再開を可能
whenNotActive ... アニメーションしていない時は再開可能
never ... 常に再開不可能
calcMode linear ※ 不明
指定可能な値は次の通り。
discrete ... ※ 不明
linear ... ※ 不明
paced ... ※ 不明
spline ... ※ 不明
additive replace 直前のanimate要素からこのanimate要素をどのように適用するか。
指定可能な値は次の通り。
replace ... 直前のanimate要素を置き換える
sum ... 直前のanimate要素に加算する
値をsumにすることで、適用する図形要素に複数のanimate要素を割り当てることができる。

begin属性、end属性、dur属性の関係は次の通りです。

時間指定の書式

属性の値に時間を指定する際の書式は次の通りです。

意味 指定例
時分秒 01:23:45 ... 1時間23分45秒
時間 2h ... 2時間
分秒 03:45 ... 3分45秒
3min ... 3分
34s ... 34秒
秒(単位なし) 56 ... 56秒
ミリ秒 3000ms ... 3秒
  • ※ 指定例にはありませんが、小数点も扱うことができます。

サンプルコードとデモ

  • ※ アニメーションが終了していた場合は

次の例はアニメーションを1回行うコードです。

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 70" width="200" height="70">
	<rect width="30" height="30" x="20" y="20">
		<animate attributeName="x" to="170" dur="1s" />
	</rect>
</svg>

次の例はアニメーションを3回繰り返すコードです。

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 70" width="200" height="70">
	<rect width="30" height="30" x="20" y="20">
		<animate attributeName="x" to="170" dur="1s" repeatCount="3" />
	</rect>
</svg>

次の例はアニメーションを複数指定したコードです。

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 170" width="200" height="170">
	<rect width="30" height="30" x="20" y="20">
		<animate attributeName="x" to="170" dur="1s" fill="freeze" />
		<animate attributeName="y" to="120" dur="2s" fill="freeze" />
		<animate attributeName="x" to="90" begin="2s" dur="400ms" fill="freeze" />
		<animate attributeName="fill" to="red" dur="0.5s" />
	</rect>
</svg>

SVG逆引きリファレンス一覧へ戻る