SVGをjavascriptで動的に作成してみるテスト

SVGに対応しているブラウザだと、javascriptを使ってHTML内で動的にSVGを作れるらしい。
と、言うわけでテスト。
以下のソースをbody内の適当な位置に挿入すると緑縁の青い円が表示されます。
表示するだけじゃつまらないのでちょっと動きます。

<div id="svgBox"></div>

<script type="text/javascript">
<!--
var ns;
var svg, circle;
var x = 55, y = 55;
var dx = 2, dy = 2;
var r = 50, d = 5, w = 400, h = 300;

function amime() {
x += dx;
y += dy;
if(x<r+d || x>w-(r+d)) dx = -dx;
if(y<r+d || y>h-(r+d)) dy = -dy;
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
}

function init() {
ns = "http://www.w3.org/2000/svg";
svg = document.createElementNS(ns, "svg:svg");
svg.setAttribute("width", w);
svg.setAttribute("height", h);

circle = document.createElementNS(ns, "svg:circle");
circle.setAttribute("cx", x);
circle.setAttribute("cy", y);
circle.setAttribute("r", "50");
circle.setAttribute("stroke", "#00FF00");
circle.setAttribute("stroke-width", "10");
circle.setAttribute("fill", "#0000FF");
circle.setAttribute("id", "circle");
svg.appendChild(circle);

document.getElementById('svgBox').appendChild(svg);

setInterval(amime, 20);
}

init();
//-->
</script>

表示例はこちら


残念ながら、SVGに対応していないIEでは表示できません。とりあえず、FireFox3.6.6、Safari4.0.5、Opera10.60、Google Chrome5.0での動作を確認。
Flashなんか使わなくても、テキストエディタだけでアニメーションが作れるのは便利便利。



それにしてもIEはいつになったらSVGに対応するんだろう？
徐々に他ブラウザがシェアを伸ばしてきているとはいえ、まだまだIEは無視できない。
IEさえ対応すれば、SVGももっと普及するのにね。