2008/10/29(水)svgとcanvas

どちらも、java scriptから描画できる機能なんだけど、それぞれ微妙に特徴が違う。
今回描画した上でイベント起こしたりしたいのでsvgを使いたいのだけれども、htmlに埋め込めない...
ダミーでも構わないので、外部にsvgファイルを用意すべきなのか。
できればhtmlだけで作りたかったんだけどなぁ。

canvasはせりかのアルバムで、画像を加工するのに使えそうな感じ。まあ、最後にファイルに上書きするのをどこが担当するか次第だけど...

svg 2008/10/30

埋め込むと言うより、JavaScriptで作れました。(firefox 3.0.3で確認)

var ns   = 'http://www.w3.org/2000/svg';
var svg  = document.createElementNS(ns, 'svg');
  svg.style.width  = x+'px';
  svg.style.height = y+'px';
var line = document.createElementNS(ns, 'line');
  line.setAttributeNS(null, 'x1', 10);
  line.setAttributeNS(null, 'y1', 10);
  line.setAttributeNS(null, 'x2', x-10);
  line.setAttributeNS(null, 'y2', y-10);
  line.setAttributeNS(null, 'stroke', 'red');
  line.setAttributeNS(null, 'stroke-width', 2);
svg.appendChild(line);

要はnamespace付きで作ればいいらしい。