Svg Action

svg-action.png
onclick
onmouseover
onmouseout
onmouseup
onmousemove
onfocusin
onfocusout
onload

記述するときの注意

スクリプトの中に文字列を書く必要がある場合は、
javascriptの方をダブルクォーテーションにする

g onclick='alert("stop?");'

SVGの部分はシングルクォーテーションすれば囲める

例 クリックしたらalertを出す

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="106" height="106" version="1.1">
<circle cx="50px" cy="50px" r="20px" fill="#A5D9DD" fill-opacity="0.6" stroke="#A5D9DD" stroke-width="3" 
onclick='alert("円を押した")'>
</circle>
</svg>

Wikidotで使用するときの注意

WikidotでSVGを埋め込むときは[[html]]〜[[/html]]で埋め込みますが、
これより外にある要素を取ることは出来ません。
同じ[[html]]〜[[/html]]の内側にある要素なら取得することができます

SVGで図形を押したら表の色が変わるデモ

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="106" height="106" version="1.1">
<circle cx="50px" cy="50px" r="20px" fill="#A5D9DD" fill-opacity="0.6" stroke="#A5D9DD" stroke-width="3" onmouseover='document.getElementById("nya").style.color="red";'
onmouseout='document.getElementById("nya").style.color="black";'>
</circle>
</svg>
<table border=1>
 <tr><th></th><th id="nya">列-A</th><th>列-B</th></tr>
 <tr><td>行-1</td><td>A-1</td><td>B-1</td></tr>
 <tr><td>行-2</td><td>A-2</td><td>B-2</td></tr>
 <tr><td>行-3</td><td>A-3</td><td>B-3</td></tr>
</table>

Bibliography

サポートサイト Wikidot.com