Dodaj element SVG do istniejącego SVG używając DOM

Question

mam konstrukcję HTML, który przypomina następujący kod:

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

Chcę, aby móc dodać kilka elementów do SVG zdefiniowane powyżej użyciu JavaScript i DOM. Jak to osiągnąć? Myślałam o

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

nie jestem bardzo obeznany z użyciem DOM, czyli jak stworzyć element mają być przekazane do appendChild więc proszę mi pomóc z tym czy może mi pokazać, jakie inne alternatywy muszę rozwiązać ten problem kwestia. Wielkie dzięki.

Answer 1

Jeśli chcesz utworzyć element HTML, użyj document.createElement funkcję. SVG używa przestrzeni nazw, dlatego musisz użyć funkcji 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); 

Kod ten będzie produkować coś takiego:

<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

Answer 2

Jeśli masz do czynienia z svg za dużo używając JS, polecam używanie d3.js. Umieścić go na swojej stronie, i zrobić coś takiego:

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