Добавить элемент 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, поэтому, пожалуйста, помогите мне с этим или, возможно, покажите мне, какие другие альтернативы мне нужно решить. Большое спасибо.

Ответ 1

Если вы хотите создать элемент 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 namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path 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

Ответ 2

Если вы имеете дело с svg много с помощью JS, я рекомендую использовать d3.js. Включите его на свою страницу и сделайте что-то вроде этого:

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