首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用DOM将SVG元素添加到现有SVG

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

Stack Overflow用户
提问于 2013-05-11 02:46:48
回答 2查看 105.7K关注 0票数 86

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

代码语言:javascript
复制
<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

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

代码语言:javascript
复制
var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-05-11 03:51:35

如果你想创建一个超文本标记语言元素,使用document.createElement函数。SVG使用命名空间,这就是为什么你必须使用document.createElementNS函数。

代码语言:javascript
复制
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);

这段代码将产生类似如下的结果:

代码语言:javascript
复制
<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElementhttps://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNShttps://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

票数 202
EN

Stack Overflow用户

发布于 2013-05-11 02:56:06

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

代码语言:javascript
复制
d3.select("#svg1").append("circle");
票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16488884

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档