使用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的元素，请帮助我解决这个问题，或者展示其他解决此问题的替代方法。非常感谢。

- biggdman

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

- m93a

---

我收到了 Uncaught TypeError: Cannot read property 'setAttribute' of null 的错误。 - B Seven

@Rvervuurt 嘿，你在干什么呢？我的帖子？ :D - m93a

@m93a 删除不必要的图片。如果你想玩图片，去论坛或聊天室，这里只会分散注意力 :) - Rvervuurt

为什么这个画图程序不工作了？哦，对了，命名空间问题：每次都让我犯迷糊。 - Lucas

我正在遵循这个方法，并使用createElementNS来创建我的路径，但它没有显示在我的页面上。然而，在检查页面时，它会显示在Dom中。 - BrunoElo

Answer 2

如果你经常使用JS处理SVG，我建议使用d3.js。在你的页面中引用它，并执行类似以下代码：

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

- ragingsquirrel3

---

我希望使用纯JavaScript完成这项任务，不依赖于外部库或函数。 - biggdman

我赞同使用D3的建议。如果你只是一次性地制作图形，那么就用纯JavaScript编写。但是，如果您经常使用SVG进行工作，则切换到d3.js会给自己带来巨大的好处。它是一个非常轻量级的库。而且它不仅支持SVG；它实际上将DOM转换为数据库。它只是让处理SVG变得很简单，所以它已经成为事实上的SVG库。 - Jonathan E. Landrum