使用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,我必须解决这个问题。 非常感谢。

如果你想创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

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

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