SVGによるベクターグラフィック(2) (3/5)
作成:2011-05-02 08:54
更新:2011-05-02 08:54
更新:2011-05-02 08:54
■SVGグラフィックのイベント
SVGグラフィックのタグには、HTMLのタグと同様、JavaScriptのイベントに関する属性が用意されています。用意されているものとしては以下のようなものがあります。
◯グラフィックおよびコンテナ・レベルでの対応
onclick――クリックした
onmousedown――マウスボタンを押した
onmouseup――マウスボタンを離した
onmouseover――マウスポインタが領域内に入った
onmousemove――マウスポインタが領域内で動いている
onmouseout――マウスポインタが領域外に出た
onload――ロードが完了した
onfocusin――フォーカスされた
onfocusout――フォーカスが外れた
onactivate――アクティブになった
◯ドキュメント・レベルでの対応
onunload――SVGドキュメントがアンロードされる
onabort――ロードが中断された
onerror――ロード時に例外が発生した
onresize――ドキュメントがリサイズされた
onscroll――ドキュメントがスクロールされた
onzoom――ドキュメントの拡大縮小率が変わった
ただし、これらすべてが、SVGを表示できる全ブラウザで対応しているわけではないようで、まだ動かないイベントがブラウザごとにあるようです。この他、アニメーション表示に関するイベントなども用意されており、イベント関係はHTMLと比べるとかなり充実しています。
とりあえず、HTMLでも標準的にサポートされているイベント（onclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout）については現時点でも問題なく動くようですので、これらを使って図形のイベント利用がどういうものか試してみるとよいでしょう。
下のリスト欄に、簡単な例を挙げておきます。ここでは、マウスポインタが図形の上に来ると色が若干暗めになり、クリックするとアラートが表示されます。この<circle>タグでは、以下のようにイベント関係の属性が用意されていますね。
◯グラフィックおよびコンテナ・レベルでの対応
onclick――クリックした
onmousedown――マウスボタンを押した
onmouseup――マウスボタンを離した
onmouseover――マウスポインタが領域内に入った
onmousemove――マウスポインタが領域内で動いている
onmouseout――マウスポインタが領域外に出た
onload――ロードが完了した
onfocusin――フォーカスされた
onfocusout――フォーカスが外れた
onactivate――アクティブになった
◯ドキュメント・レベルでの対応
onunload――SVGドキュメントがアンロードされる
onabort――ロードが中断された
onerror――ロード時に例外が発生した
onresize――ドキュメントがリサイズされた
onscroll――ドキュメントがスクロールされた
onzoom――ドキュメントの拡大縮小率が変わった
ただし、これらすべてが、SVGを表示できる全ブラウザで対応しているわけではないようで、まだ動かないイベントがブラウザごとにあるようです。この他、アニメーション表示に関するイベントなども用意されており、イベント関係はHTMLと比べるとかなり充実しています。
とりあえず、HTMLでも標準的にサポートされているイベント（onclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout）については現時点でも問題なく動くようですので、これらを使って図形のイベント利用がどういうものか試してみるとよいでしょう。
下のリスト欄に、簡単な例を挙げておきます。ここでは、マウスポインタが図形の上に来ると色が若干暗めになり、クリックするとアラートが表示されます。この<circle>タグでは、以下のようにイベント関係の属性が用意されていますね。
onmouseover="doIn();" onmouseout="doOut();" onclick="doClick();"HTMLのタグと同様、イベント属性にJavaScriptの処理を用意しておくことで、イベント発生時の処理が行えます。通常は、あらかじめ関数として処理を定義しておき、この例のように関数の実行を値に設定しておくのがよいでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<title>サンプルページ</title>
<script type="text/javascript">
function doClick(){
alert("click!");
}
function doIn(){
var circle1 = document.getElementById('circle1');
circle1.setAttribute('fill',"#AA3333");
}
function doOut(){
var circle1 = document.getElementById('circle1');
circle1.setAttribute('fill',"#FF6666");
}
</script>
</head>
<body>
<p>SVGのサンプル</p>
<svg width="200px" height="150px"
xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="100px" cy="75px" r="50px"
fill="#FF6666" stroke="#FF0000" stroke-width="5px"
onmouseover="doIn();" onmouseout="doOut();" onclick="doClick();" />
</svg>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る