我有一个类似于以下代码的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函数的原因。
document.createElement
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>