開発環境 |
メモ帳 |
実行環境 |
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