Svg Action

最終更新日21 Jun 2017 06:01

onclick
onmouseover
onmouseout
onmouseup
onmousemove
onfocusin
onfocusout
onload

マウスホバーで透明度変える

イベントが起きた自身のオブジェクトを得るには

 onmouseover="evt.target.setAttribute('opacity', '0.5');"
 onmouseout="evt.target.setAttribute('opacity', '1.0');"

evt.target.setAttribute
[2]より

<?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="evt.target.setAttribute('opacity', '0.5');"
 onmouseout="evt.target.setAttribute('opacity', '1.0');"
>
</circle>
</svg>

オブジェクト固有でアクションを付けたい場合はこの方法がいいけれど、
全部一括のアクションを設定するのには向いていない。

記述するときの注意

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

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

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

cssでマウスホバー

<?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">
<style>
circle:hover {opacity:0.5;}
</style>
<circle cx="50px" cy="50px" r="20px" fill="#A5D9DD" stroke="#A5D9DD" stroke-width="3" 
>
</circle>
</svg>

CSSでスタイルを変えるときの注意

たとえばcircleにopacityが指定されていたら、cssで命令しても後から上書きされてしまうので効き目がない。
なので上書きしたい場合は!IMPORTANTと記述する[3]

path:hover {fill:red !IMPORTANT;}

例 クリックしたら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>


ファイル

サポートサイト Wikidot.com