2008/10/29(水)svgとcanvas
どちらも、java scriptから描画できる機能なんだけど、それぞれ微妙に特徴が違う。
今回描画した上でイベント起こしたりしたいのでsvgを使いたいのだけれども、htmlに埋め込めない...
ダミーでも構わないので、外部にsvgファイルを用意すべきなのか。
できればhtmlだけで作りたかったんだけどなぁ。
canvasはせりかのアルバムで、画像を加工するのに使えそうな感じ。まあ、最後にファイルに上書きするのをどこが担当するか次第だけど...
svg
埋め込むと言うより、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付きで作ればいいらしい。