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

Question

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

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

Je veux être capable d'ajouter des éléments au SVG défini ci-dessus en utilisant javascript et DOM. Comment pourrais-je y parvenir ? 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 de DOM, ni avec la création de l'élément à passer à appendChild. Je vous prie donc de m'aider ou de m'indiquer les autres possibilités qui s'offrent à moi pour résoudre ce problème. Merci beaucoup.

Answer 1

Si vous voulez créer un élément HTML, utilisez document.createElement fonction. SVG utilise des espaces de noms, c'est pourquoi vous devez utiliser la fonction document.createElementNS fonction.

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 manipulez beaucoup de svg en utilisant JS, je vous recommande d'utiliser d3.js. Incluez-le dans votre page, et faites quelque chose comme ceci :

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