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

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

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

//绘制一些svg元素

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

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

var svg1=document.getElementById（'intro'）.getElementsByTagName（'svg'）；
svg1[0]。追加子元素（元素）//元素类，

---

我不太熟悉使用DOM，也不太熟悉如何创建要传递给appendChild的元素，所以请帮助我解决这个问题，或者告诉我解决这个问题的其他方法。非常感谢。

如果您使用JS处理svg的大量问题，我建议您使用d3.JS。将其包含在您的页面上，并执行以下操作：

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

---

如果要创建HTML元素，请使用

document.createElement

函数。SVG使用名称空间，这就是为什么必须使用

document.createElements

函数

var svg=document.getElementsByTagName（'svg'）[0]//获取svg元素
var newElement=document.createElements（“http://www.w3.org/2000/svg“，‘路径’”//在SVG的命名空间中创建路径
setAttribute（“d”，“m0 0 l10”）//设置路径的数据
newElement.style.stroke=“#000”//设置笔画颜色
newElement.style.strokeWidth=“5px”//设置笔划宽度
appendChild（新元素）；

此代码将生成如下内容：

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

createElement

：

createElements

：

---

我希望使用纯javascript，而不使用外部库或函数来完成这项工作，这正是我所需要的！谢谢。我得到了

未捕获的类型错误：无法读取null的属性“setAttribute”

@rvervourt嘿，你在用我的帖子做什么D@m93a删除不必要的图像。如果你想从图片中获得乐趣，可以去论坛或聊天，这会分散你的注意力：）为什么这不是绘画？哦，是的，名称空间：每次都让我着迷。应该注意的是，与人们所想的相反，您通常使用

newElement.setAttribute（）

将属性设置为与

newElement.setAttributes（）相反的属性，至少在Chrome中是这样。