5.ダイナミックSVG1
2005.12.08 株式会社四次元データ 藤本将光
これまでは、静的な描画表現方法について説明してきました。ここからは作成した画像を動かす方法について解説します。
SVGにおいて動的な処理を行う方法には、以下の2つの方法があります。
- animete要素によってアニメーションを記述する
- JavaScript、DOMを組み合わせて属性を変化させる
本章と次章（6章）では、animate要素によるアニメーションの記述方法を示します。
5.1. animate要素によるアニメーション
animate要素によるアニメーションは、要素の属性値を変化させることによって行います。
実際には、アニメーションの対象となる描画要素の中に、animate要素を入れ(入れ子にする）、そのanimate要素の中で、以下の属性値を指定することによって、アニメーションを行います。
animate要素には以下のものがあります。
| animate要素 | 説明 |
|---|
| animate | 対象とする描画要素の属性を指定し、それを変化させる |
| animateMotion | 対象となる描画要素をモーションパスに合わせて、動かす |
| animateColor | 色を変化させる |
| animateTransform | transform属性にアニメーション機能を与えたもの |
以下にanimate要素における属性を示します。
<すべてのanimate要素に共通する属性>
| 属性値 | 説明 |
|---|
| attributeType | 変更する属性のタイプを指定する。 |
| attributeName | 変化させたい属性の名前を指定する。 |
| from | 変化させたい属性のアニメーションの開始時の値を示す。 |
| to | 変化させたい属性値のアニメーションの終了時の値を示す。 |
| begin | アニメーションの開始時を示す。 |
| dur | アニメーションの期間を示す。 |
| by | アニメーションがオフセットされる時間を示す。 |
| fill | アニメーション終了時の設定を指定する。値には「freeze」か「remove」を入れる。「freeze」であれば、終了時に属性が変化した状態のままにする。「remove」であれば、終了時に、最初の設定に戻す。 |
| values | 複数の値をセミコロンで区切って入れる。from,to,by属性の代わりに変化する値を指定することができる。例えば、values="0;3;10" begin="1" dur="2"のとき、属性値は1秒後には0、2秒後には3、3秒後には10に変化する。 |
| repeatCount | アニメーションを反復させる回数を指定する。"indefinite"なら、永久に反復する。 |
| repeatDur | アニメーションを反復させる期間を指定する。 |
では、実際のanimate要素のサンプル見てみましょう。
