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

Question

我有一个类似于以下代码的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或如何创建要传递给appendChild的元素不是很熟悉，因此请帮助我解决这个问题，或者向我展示解决该问题的其他替代方法。 非常感谢。

Answer 1

如果要创建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/zh-CN/docs/Web/API/Document/createElement

createElementNS ： https : //developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS

Answer 2

如果您使用JS处理大量SVG，建议您使用d3.js。 将其包含在您的页面上，然后执行以下操作：

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