[解決済み] DOMを使用して既存のSVGにSVG要素を追加する

質問

以下のようなHTMLの構成があります。

<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

javascriptとDOMを使って、上で定義されたSVGにいくつかの要素を追加できるようにしたいです。どのようにそれを達成するのでしょうか？私は次のように考えていました。

var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

私はDOMの使用や、appendChildに渡される要素の作成方法についてあまり詳しくないので、これについて私を助けてください、あるいは、この問題を解決するための他の代替手段を教えてください。どうもありがとうございました。

どのように解決するのですか?

HTML要素を作成する場合は document.createElement という関数を使います。SVGは名前空間を使うので、そのために document.createElementNS 関数を使用します。

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

このコードでは、次のようなものが生成されます。

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement : https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS : https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS