SVGの要素をHTMLのフォームパーツで操作する
objectタグで適当なidをつけてSVGを埋め込んで、
document.getElementById('hogehoge').contentDocument;
で、SVGDocumentを取得。あとは、SVGに対するJavaScriptを記述すればよい。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>traffic light</title> <script type="text/javascript"> var now = 'blue'; var svg; function init(){ svg = document.getElementById("testsvg").contentDocument; switch_on(now); } function switch_on(col){ var circle = svg.getElementById(now); circle.style.setProperty('fill', '#999999'); circle = svg.getElementById(col); circle.style.setProperty('fill', col); now = col; } </script> </head> <body onload="init()"> <h1>traffic light</h1> <object id="testsvg" data="test.svg" type="image/svg+xml" width="600px" height="200px"> </object> <p> <input type="radio" name="switch" value="blue" onclick="switch_on(this.value);" checked>Blue <input type="radio" name="switch" value="yellow" onclick="switch_on(this.value);">Yellow <input type="radio" name="switch" value="red" onclick="switch_on(this.value);">Red </p> </body> </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="600px" height="200px" version="1.0"> <circle id="blue" cx="100" cy="100" r="100" style="fill:#999999" /> <circle id="yellow" cx="300" cy="100" r="100" style="fill:#999999" /> <circle id="red" cx="500" cy="100" r="100" style="fill:#999999" /> </svg>