SVG 動的に要素を追加する

SVGにJavaScriptで動的に要素を追加する場合, HTMLElementのように, document.createElementメソッドで要素を作成し, DOMツリーに追加する方法ではうまくいきません

var text = document.createElement('text');

text.setAttribute('x', 10);
text.setAttribute('y', 10);
text.textContent = 'sample';

var svg = document.querySelector('svg');

svg.appendChild(text);

この問題は, 要素を作成するときに名前空間を指定できるdocument.createElementNSメソッドを利用することで解決できます.

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');

text.setAttribute('x', 10);
text.setAttribute('y', 10);
text.textContent = 'sample';

var svg = document.querySelector('svg');

svg.appendChild(text);

第1引数にSVGの名前空間を指定し, 第2引数にSVGのタグ名を指定するだけです.

参考 : document.createElementNS

コメントを残す