使用DOM将SVG元素添加到现有的SVG

我有一个类似于下面的代码的HTML结构：

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

我希望能够使用javascript和DOM将以上定义的SVG添加到一些元素。 我将如何做到这一点？ 我正在想

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

我不是很熟悉使用DOM，或者如何创build传递给appendChild的元素，所以请帮我解决这个问题，或者告诉我有什么其他的select，我必须解决这个问题。 非常感谢。

Answer 1

如果你想创build一个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'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); 

这段代码会产生这样的东西：

 <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

如果你使用JS来处理svg，我推荐使用d3.js. 将其包含在您的页面上，并执行如下操作：

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