|
■ DOMとJavaScript
前回作成した、アニメーション属性を使用して、マウスをクリックしたりした時などに
アニメーションが始まる等のイベントを、今回はDOMとJavaScriptを利用して作成してみましょう。
DOMのsetAttribute()（属性値を変更）を使用し、
直接JavaScriptのイベント属性をSVG要素の中に記述して、
再び画像にマウスを乗せた時・画像からマウスを放したときにイベントが起こるように設定してみます。
では簡単なファイルを作成してみましょう。
以下の記述ではマウスが要素の上に乗ったとき、又離れた時にイベントが発生します。
ファイル名は「svg07.svg」とします。
■ svg07.svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g id="ki" style="stroke:#000066;stroke-width:3;fill:#000000">
<circle onmouseover="evt.target.setAttribute('fill','#ffff33');
evt.target.setAttribute('stroke','#000000')"
onmouseout="evt.target.setAttribute('fill','#000000');
evt.target.setAttribute('stroke','#cccccc')"
cx="120" cy="120" r="100"/>
</g>
<g id="moji">
<text x="68" y="130" style="font-size:70px">
XML
</text>
</g>
</svg>
<circle onmouseover="evt.target.setAttribute('fill','#ffff33');
evt.target.setAttribute('stroke','#000000')"
onmouseout="evt.target.setAttribute('fill','#000000');
evt.target.setAttribute('stroke','#cccccc')"
cx="120" cy="120" r="100"/>
「onmouseover="evt.target.setAttribute('fill','#ffff33');
evt.target.setAttribute('stroke','#000000')"」
SVG画像に「onmouseoverイベント属性」を直接書きこんで、画像の上にマウスが
乗ると、「evt.target.setAttribute('fill','#ffff33')」によって、円の色が
「#ffff33（黄色）」に、「evt.target.setAttribute('stroke','#000000')」
によって、円の線の色が「#000000（黒色）」に変化します。複数のコマンドを書き込む時は
「;（セミコロン）」で区切って下さい。
「onmouseout="evt.target.setAttribute('fill','#000000');
evt.target.setAttribute('stroke','#cccccc')"」
SVG画像に「onmouseoutイベント属性」を直接書きこんで、画像からマウスが
離れると、「evt.target.setAttribute('fill','#000000')」によって、円の色が
「#000000（黒色）」に、「evt.target.setAttribute('stroke','#cccccc')」
によって、円の線の色が「#cccccc（グレー）」に変化します。
このようにDOMとJavaScriptを使用して、画像をダイナミックに変更する事ができます。
「svg07.svg」のサンプルは以下から見る事ができます。
（※Adobe SVG Viewerが必要）
画像にマウスが乗ると色が変わるイベントが見られるはずです。
svg07.svgのサンプルページ
|
