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>