使用DOM向现有SVG添加SVG元素
Add SVG element to existing SVG using DOM
我有一个类似于以下代码的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");
相关文章:
- 在SVG地图上添加水的渐变,就像在谷歌地图(PHP/JS)中一样
- 将形状/掩码动态添加到内联svg中
- 如何使用javascript添加svg
- 如何在svg元素上添加和删除css类
- 动态创建foreignGroup并将其添加到svg中有什么问题
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- 如何将运动模糊尾巴添加到圆圈中的 svg 元素
- 如何添加 SVG 文本标记 从 JavaScript 函数返回的值
- 是否可以用D3将svg元素添加到开放层映射中
- 添加图像与点svg画布
- 如何在svg中添加围绕整个圆的笔划和旋转圆的动画
- 我可以将页面上已经存在的svg添加到另一个svg中吗
- Snap SVG添加/删除链接属性
- 使用DOM向现有SVG添加SVG元素
- 向SVG添加CSS样式
- 将SVG添加到HTML并处理事件
- 如何动态地向HTML5 SVG添加元素
- 不能使用SVGweb在Internet Explorer中为SVG添加侦听器
- 如何使用纯Javascript向嵌入的SVG添加元素?