tomo.mobi

Representation design of material


SVGのDOM追加について

SVGはHTMLではなくXMLなので、DOMの追加には一癖あります。
setAttributeNSでxlinkを追加してあげる必要があります。
createElementNSで新規のDOMの追加をします。

var xlinkns = "http://www.w3.org/1999/xlink";
var svgns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
・
・
・
細かいパラメータの追加
・
・
・
circle.setAttributeNS(xlinkns, "href", "#circle");
・
・
・

上記のような感じです。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/types.html#InterfaceSVGURIReference
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/svgdom.html#RelationshipWithDOM2Events
とりあえず、次のSVGの記事ではもう少しまともな何かを作ってみます。