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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (74)

我有一个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的元素,所以请帮助我解决这个问题,或者告诉我还有什么其他方案可以解决这个问题。

提问于
用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券