SVGチュートリアル

SVG要素

SVG<Animation>アニメーション要素

SVG <Animation> アニメーション要素は、SVGグラフにアニメーションを作成するために使用されます。アニメーション要素は最初に、同期マルチメディア統合言語（SMIL）で定義されました。アニメーションでは、属性、動き、色、アニメーションの開始時間、アニメーションの持続時間の開始値と終了値を指定する必要があります。

SVG画像内の形状にアニメーションを加えることができます。異なる方法でSVG形状にアニメーションを加える方法がいくつかあります。この記事では、さまざまな可能性を紹介します。

SVGアニメーション例

これはシンプルなSVGアニメーションの例です：

サンプル

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="110"　width="110"
　　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff">
　　　　　　　　<animateTransform
　　　　　　　　　　　　attributeName="transform"
　　　　　　　　　　　　begin="0s"
　　　　　　　　　　　　dur="20s"
　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　from="0　60　60"
　　　　　　　　　　　　to="360　60　60"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　/>
　　　　</rect>
</svg>

テストをしてみる‹/›

要素<rect>が要素<animateTransform>内にどのようにネストされているか注意してください。この要素が矩形のアニメーションを可能にしています。

生成されたSVGアニメーションはこちら：

アニメーションオプションの概要

形状の時間随時の属性を操作してアニメーションを作成します。5SVGアニメーション要素の1つまたは複数がこの操作を行います：

<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>

これらのSVGアニメーション要素の各要素は、SVG形状の異なる側面にアニメーションを設定します。これらのアニメーション要素は本文の後半で説明されます。

set

このset要素は、SVGアニメーション要素の中で最もシンプルな要素です。特定の時間間隔が経過すると、属性を特定の値に設定するだけで、形状は連続的にアニメーション処理を行わず、属性値を一度に変更します。

これは<set>要素の例です：

サンプル

<svg　width="500"　　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<set　attributeName="r"　attributeType="XML"
　　　　　　　　　to="100"
　　　　　　　　　begin="0s"　　/>
</circle></svg>

テストをしてみる‹/›

注意：<set>要素はcircle要素内にネストされています。これが<set>要素を形状に適用する方法です-適用する形状のSVG要素内にネストすることで。

<set>要素は特定の時間に属性の値を設定します。設定する属性名はattributeName属性で指定されます。設定する値はto属性で指定されます。設定する時間はbegin属性で指定されます。

上の例のrは5秒後に属性を設定します100。実行後の画像効果：

attributeType

前の例では、<set>要素にもattributeType属性があります。この値はXMLに設定されています。これは、設定する値を持つ属性（r属性）がSVG Circle要素の属性であるためです。SVG要素はXML要素であり、SVG属性もXML属性です。

形状のCSS属性のアニメーションも設定できます。これを行う場合、attributeTypeをCSSに設定する必要があります。attributeType属性が提供されない場合、ブラウザはアニメーションを設定する属性がXML属性であるかCSS属性であるかを推測しようとします。

animate

animate要素は、SVG形状の属性にアニメーションを設定するために使用されます。アニメーションを設定する形状内にanimate要素をネストすることができます。これは例です：

サンプル

<svg　width="500"　　height="100"><circle　cx="30"　cy="30"　r="25"　style="stroke:　none;　fill:　#0000ff;">
　　　　<animate　attributeName="cx"　attributeType="XML"
　　　　　　　　　　　　　from="30"　　to="470"
　　　　　　　　　　　　　begin="0s"　dur="5s"
　　　　　　　　　　　　　fill="remove" repeatCount="indefinite"/>
</circle></svg>

テストをしてみる‹/›

この例では、<circle>要素のcx属性を値30（「from」属性）に設定された値479（「to」属性）のアニメーション。アニメーションは0秒から始まり（「begin」属性）、5秒（「dur」属性）。

アニメーションが完了すると、アニメーション属性は元の値に設定されます（「fill」属性を「remove」に設定）。アニメーション属性が「to」属性の値を保持するようにする場合は、-valueに設定すると、「fill」属性を「freeze」に設定してください。アニメーションは無限に繰り返されます（「repeatCount」属性）。

生成されたアニメーションは以下の通りです：

animateTransform

<AnimateTransform>要素は形状のTransform属性にアニメーションを設定できます。<Animate>要素はこれができません。

これは一例です：

サンプル

<svg　width="500"　　height="100"><rect　x="20"　y="20"　width="100"　height="40"
　　　　style="stroke:　#ff00ff;　fill:none;"　>
　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　from="0　100　100"　to="360　100　100"
　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　/>
</rect></svg>

テストをしてみる‹/›

この<animateTransform>サンプルは、transform内に埋め込まれた<rect>要素の属性にアニメーションを適用します。type属性はrotate（回転変換機能）に設定されており、アニメーション変換は回転であることを示しています。fromとto属性で設定されたパラメータは、rotate関数に渡されます。この例では、点100,100度から0度まで回転します。360度。

これは正方形の比例アニメーションを生成する例です：

サンプル

<svg　width="500"　height="200">
　　　　<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　　　　　style="stroke:　#ff00ff;　fill:　none;"　>
　　　　　　　　<animateTransform　attributeName="transform"
　　　　　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　　　　　from="1　1"　to="2　3"
　　　　　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateTransform>
　　　　</rect>
</svg>

テストをしてみる‹/›

再び注意してください、fromとto属性は、scale()変換関数に渡される通常のパラメータです。

生成されたアニメーションは以下の通りです：

animateMotion（動画運動）

<animateMotion>要素はパスの形状に沿ってアニメーションを動かすことができます。形状を回転してパスの傾斜に合わせることもできます。例えば、山道を走る車のように。これは例です：

サンプル

<svg　width="500"　height="150">
　　　　<path　d="M}}10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"
　　　　　　　　　　　　></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

テストをしてみる‹/›

pathは<animateMotion>要素の属性で矩形アニメーションのパスを指定します。このpath属性は、path要素同じ文法です。

これもパスの結果アニメーションが表示されているため、動きをよりよく追うことができます。

正方形をパスの傾斜に合わせて回転させるために、<animateMotion>要素のrotate属性をautoに設定してください。これは例です：

サンプル

<svg　width="500"　height="150">
　　　　<path　d="M}}10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"></path>
　　　　<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　　　　　<animateMotion
　　　　　　　　　　　　　　　　path="M10,50　q60,50　100,0　q60,-50　100,0"
　　　　　　　　　　　　　　　　begin="0s"　dur="10s"　repeatCount="indefinite"
　　　　　　　　　　　　　　　　rotate="auto"
　　　　　　　　　　　　　　　></animateMotion>
　　　　</rect>
</svg>

テストをしてみる‹/›

生成されたアニメーションは以下の通りです。正方形の回転がどのように変化してパスに適応するかご注意ください。

rotate属性を特定の値に設定することもできます、例えば、20または30等。これにより、アニメーションの全体で形状がこの角度数で回転します。

時間単位

SVGアニメーションを定義する際には、アニメーションの開始時間と持続時間を指定できます。指定する場合、異なる時間単位間で選択できます。時間単位内で、begin、dur、endと呼ばれる各種アニメーション要素の属性が通常指定されます。

これらの属性では、本文の例に示されるように、数字と時間単位を指定できます。例えば、5s5秒。以下に使用できる時間単位のリストがあります：

時間単位	説明
h	時間
min	分
s	秒
ms	ミリ秒

時間を包含する時間フォーマットで指定することもできます。以下のフォーマットで指定します：

hh:mm:ss

これは一例です：

1:30:45

この例では指定されています：1時間30分45秒の時間（アニメーションにとっては非常に長い時間です）。

同期アニメーション

アニメーションの開始を他のアニメーションの終了に同期できます。以下のようにします：

サンプル

<svg　width="500"　height="100">
<rect　x="0"　y="0"　width="30"　height="15"
　　　　　　style="stroke:　#ff0000;　fill:　none;">
　　　　<animate　id="one"　attributeName="x"　attributeType="XML"
　　　　　　　　　　　　　from="0"　to="400"
　　　　　　　　　　　　　begin="0s"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
　　　　<animate　attributeName="y"　attributeType="XML"
　　　　　　　　　　　　from="0"　to="50"　begin="one.end"　dur="10s"　fill="freeze"
　　　　　　　　　　></animate>
</rect>
　　　　</svg>

テストをしてみる‹/›

生成されたアニメーションは以下の通りです：

第1つのアニメーションのid属性はoneに設定されています。

第2つのアニメーションはbegin属性を通じて第1つのアニメーションを参照します。このbegin属性の値がone.endに設定されているため、このアニメーションはID oneのアニメーションが終わったときに開始されることを意味します。

他のアニメーションが開始または終了するとき、id.beginまたはid.endを使用してアニメーションを開始できます。idを使用する代わりに、アニメーション要素のIDを使用して同期します。

他のアニメーションの開始または終了時のオフセット時間を指定することもできます。以下のようになります：

one.begin+10s
one.end+5s

また、アニメーションのend属性で明確な終了時間を指定することもできます。これはdur属性を置き換えるものではありません。これにより、アニメーションに別の終了可能なエンドポイントが追加され、最初に発生したものが優先されます。これはサンプルです：

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"　end="one.end"
　　　　　　　　fill="freeze"
　　　　　　　　/>

このアニメーションの長さは10秒、またはID　oneが終了したアニメーションの終了時まで停止します。

繰り返しアニメーション

アニメーション要素内でアニメーションを繰り返すために二つの属性を使用できます。

一番目の属性はrepeatCount属性です。この属性内で、アニメーションを繰り返す回数を設定する数字を設定できます。または、アニメーションを停止しないようにindefiniteの値を使用します。

二番目の属性は、repeatDurです。この属性では、アニメーションを繰り返し再生する持续时间を指定します。また、repeatDur属性内で値indefiniteを使用することもできます。これとrepeatCount属性内で値を使用する効果は同じです。

これは二つの例です：

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatCount="3"
　　　　　　　　fill="freeze"
　　　　　　　　/>

<animate
　　　　　　　　attributeName="y"　attributeType="XML"
　　　　　　　　from="0"　to="50"
　　　　　　　　begin="one.begin+3s"　dur="10s"
　　　　　　　　repeatDur="30s"
　　　　　　　　fill="freeze"
　　　　　　　　/>

アニメーション組み合わせ

要素内に複数のアニメーションをリストアップしてアニメーションを組み合わせるには<animation>を使用できます。ご覧いただいたように、これは別の例です：

サンプル

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="10"　y="10"　width="40"　height="20"
　　　　　style="stroke:　#000000;　fill:　none;">
　　　<animate　attributeName="x"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="400"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
　　　<animate　attributeName="y"
　　　　　　　　　　　　attributeType="XML"
　　　　　　　　　　　　from="10"　to="100"
　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　></animate>
</rect>
</svg>

テストをしてみる‹/›

このサンプルには二つのアニメーションがあります。それぞれのアニメーションは矩形のxとy属性にアニメーションを設定します。生成されたアニメーションはこちらです：

動作変換要素<animateTransform>を組み合わせるとき、デフォルトの動作は二番目のアニメーションが一番目のアニメーションをキャンセルします。しかし、二つの<animateTransform>要素に属性additiveと値sumを追加することで変換アニメーションを組み合わせることができます。これはサンプルです：

サンプル

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><rect　x="10"　y="10"　width="40"　height="20"
　　　　　　style="stroke:　#000000;　fill:　none;">
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="scale"
　　　　　　　　　　　　　　　　　　　　　　from="1"　to="3"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"
　　　　　　　　　　　　　　additive="sum"
　　　　　　　　　　　　></animateTransform>
　　　　<animateTransform　attributeName="transform"　attributeType="XML"
　　　　　　　　　　　　　　　　　　　　　　type="rotate"
　　　　　　　　　　　　　　　　　　　　　　from="0　30　20"　to="360　30　20"
　　　　　　　　　　　　　　　　　　　　　　begin="0s"　dur="10s"
　　　　　　　　　　　　　　　　　　　　　　fill="freeze"
　　　　　　　　　　　　　　　　　　　　　　repeatCount="indefinite"　additive="sum"
　　　　　　　　　　　　></animateTransform>
</svg>

テストをしてみる‹/›

これは拡大と回転矩形の結果アニメーションです：

SVGjavascriptスクリプト SVG<mask>要素