Ajouter un élément SVG à SVG existant en utilisant DOM

Question

J'ai une construction HTML qui ressemble le code suivant:

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

Je veux être en mesure d'ajouter des éléments au SVG définis ci-dessus en utilisant javascript et DOM. Comment pourrais-je accomplir cela? Je pensais

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

Je ne suis pas très familier avec l'utilisation DOM, ou comment créer l'élément à transmettre à appendChild alors s'il vous plaît, aidez-moi avec ce ou peut-être me montrer ce que d'autres alternatives que je dois résoudre ce problème. Merci beaucoup.

Answer 1

Si vous voulez créer un élément HTML, utilisez la fonction document.createElement. SVG utilise l'espace de noms, c'est pourquoi vous devez utiliser la fonction 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); 

Ce code produira quelque chose comme ceci:

<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

Si vous faites beaucoup de svg avec JS, je recommande d'utiliser d3.js. Inclure sur votre page, et faire quelque chose comme ceci:

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