Додайте елемент SVG до існуючого SVG за допомогою DOM

У мене є конструкція HTML, яка нагадує такий код:

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

Я хочу мати можливість додавати деякі елементи до SVG, визначеного вище, за допомогою javascript та DOM. Як би я це зробив? Я думав про це

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

Якщо ви багато маєте справу зі svg за допомогою JS, я рекомендую використовувати d3.js. Включіть його на свою сторінку та зробіть щось подібне:

d3.select("#svg1").append("circle");