開発環境 メモ帳
実行環境 Internet Explorer 11


svgCircle.html
<!doctype html>
<head>
<title>svgCircle</title>
<script>
 
var namespaceURI = "http://www.w3.org/2000/svg";
var svg;
 
window.onload = function(){
	svg = document.getElementById("svg");
	draw();
}
 
function draw()
{
	while (svg.firstChild) {
		svg.removeChild(svg.firstChild);
	}
 
	var bg = document.createElementNS(namespaceURI, "rect");
	bg.setAttribute("width", svg.clientWidth);
	bg.setAttribute("height", svg.clientHeight);
	bg.setAttribute("stroke", "#000000");
	bg.setAttribute("fill", "#ffffff");
	svg.appendChild(bg);
 
	for (var i = 0; i < 100; i++) {
		var c = document.createElementNS(namespaceURI, "circle");
		c.setAttribute("cx", Math.random() * svg.clientWidth);
		c.setAttribute("cy", Math.random() * svg.clientHeight);
		c.setAttribute("r", Math.random() * 100);
		c.setAttribute("fill", "#" + Math.floor(Math.random() * 0x1000000).toString(16));
		c.setAttribute("opacity", 0.5);
		svg.appendChild(c);
	}
 
	setTimeout("draw()", 5000);
}
 
</script>
</head>
 
<body>
<svg id="svg" width=800 height=600></svg>
</body>
 
最終更新:2014年08月08日 12:03