7. ダイナミックSVG3
2006.01.06 株式会社四次元データ 藤本将光
5章、6章ではanimate要素によるアニメーションを説明してきました。
本章では、このアニメーションをイベントして発生させる方法について説明します。
7.1. イベント
イベントでは、マウスやキーボードの動きに連動して、アニメーションを作動させることができます。
イベントを発生させる方法には、以下の2通りの方法があります。
- イベント属性をアニメーション関連属性に付加する
- スクリプト（次章）を呼び出す
以下では、1のイベント属性をアニメーション関連属性に付加する方法について説明します。
イベント属性には以下のような例があります。
| イベント属性 | 説明 |
|---|
| onfocusin | 要素にフォーカスが与えられたとき |
| onfocusout | 要素のフォーカスが離れたとき |
| onactivate | 要素がアクティブな状態になったとき |
| onclick | 要素上でクリックされたとき |
| onmousedown | 要素上でポインターが押されているとき |
| onmouseup | 要素上でポインターが放されたとき |
| onmouseover | 要素内にポインターが移動してきたとき |
| onmousemove | 要素上をポインターが移動しているとき |
| onmouseout | 要素外にポインターが移動したとき |
| onload | SVG文書を読み込み、その要素の処理に始めるとき |
| onabort | SVG文書の読み込みが中断されたとき |
| onerror | SVG文書の読み込み、あるいは、実行時にエラーが発生したとき |
| onresize | ドキュメントのサイズが変更されたとき |
| onscrol | ドキュメントがある方向にシフトしたとき |
| onzoom | ドキュメントのズームが変更されたとき |
| onbegin | アニメーションが開始したとき |
| onend | アニメーションが終了したとき |
| onrepeat | アニメーションが繰り返されているとき |
以下に、サンプルを示します。
赤い四角形をクリックしてみて下さい。イベントが発生します。
(サンプルのソース)
<svg width="600" height="300">
<rect id="abc" x="50" y="50" width="100" height="100" fill="red">
<animateColor attributeName="fill" begin="click" dur="2s" from="red" to="blue"/>
</rect>
</svg>
上記の例では、animateColor属性に対して、beginの値に"click"を指定することでイベントを与えています。
この例におけるイベントは赤色の四角形上でマウスをクリックすると、正方形の色が2秒間で赤から青へと変化するものです。
