SVG の要素にイベントを設定
SVG の要素にイベントを設定する方法のメモ。
SVG の要素にイベントを設定する方法のメモ。
<html> <head> <title></title> </head> <body><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" style="background-color:#aaaaaa;"> <rect id="id-1" type="target" x="10" y="20" width="30" height="20" fill="#00ff00"/> <rect id="id-2" type="target" x="50" y="60" width="20" height="10" fill="#0000ff"/> </svg>message area<script language="javascript"> // クリックイベントハンドラ function click_event_handler(e) { const msg_area = document.getElementById('message_area'); msg_area.innerHTML += `clicked: id="${e.srcElement.id}"`; console.log(e); } // クリックイベントハンドラを設定 const tgts = document.querySelectorAll("[type='target']"); for (let tgt of tgts) { tgt.onclick = (e) => { click_event_handler(e); } } </script> </body> </html>
rect 要素をクリックすると、以下のように rect の id が表示されます。
clicked: id="id-1" clicked: id="id-2"
