web-dev-qa-db-fra.com

Ajouter un élément SVG à un SVG existant à l'aide de DOM

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

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

Je veux pouvoir ajouter des éléments au SVG défini 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 connais pas très bien l'utilisation de DOM ou la création de l'élément à transmettre à appendChild. Aidez-moi, s'il vous plaît, ou montrez-moi les autres solutions possibles pour résoudre ce problème. Merci beaucoup.

javascripthtmlhtml5domsvg
71
biggdman

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

164
m93a

Si vous avez beaucoup à faire avec svg avec JS, je vous recommande d'utiliser d3.js. Incluez-le sur votre page et faites quelque chose comme ceci:

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