SVGに関連する要素を生成
SVGに関連する要素を生成するには、document.createElementNSメソッドを使用します。
SVGとして定義するsvg要素はもちろん、図形を描画するrect要素やcircle要素などSVGに関する要素は、全てdocument.createElementNSメソッドを使用します。
SVG関連の要素は名前空間を指定する必要があり、document.createElementメソッドではSVGとして正しく生成することができません。
そこで名前空間を指定することができるdocument.createElementNSメソッドを使用します。
document.createElementNSメソッドについては、名前空間を指定して新しく要素を生成ページをご覧ください。
サンプルコード
JavaScript
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circleElement = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
svgElement.setAttribute('viewBox', '0 0 100 100');
svgElement.setAttribute('width', '100');
svgElement.setAttribute('height', '100');
circleElement.setAttribute('cx', 50);
circleElement.setAttribute('cy', 50);
circleElement.setAttribute('r', 50);
circleElement.setAttribute('fill', '#d00');
svgElement.appendChild(circleElement);
document.body.appendChild(svgElement);