java dom解析svg_javascript – 如何操作SVG DOM并创建元素？

如何获取SVG DOM根目录,并以编程方式开始向其添加子项,而不是通过标记添加SVG元素？

解决方法:

var svg = document.documentElement;

var svgNS = svg.namespaceURI;

var circle = document.createElementNS(svgNS,'circle');

circle.setAttribute('cx',100);

circle.setAttribute('cy',200);

circle.setAttribute('r',50);

circle.setAttribute('fill','red');

circle.setAttribute('stroke','black');

circle.setAttribute('stroke-width','20px');

circle.setAttribute('stroke-opacity','0.5');

svg.appendChild(circle);

因为发出所有这些setAttribute调用会非常麻烦,所以我经常使用这样的函数：

// Create an SVG element on another node with a set of attributes.

// Attributes with colons in the name (e.g. 'xlink:href') will automatically

// find the appropriate namespace URI from the SVG element.

// Optionally specify text to create as a child node, for example

// createOn(someGroup,'text',{x:100,'text-anchor':'middle'},"Hello World!");

function createOn(root,name,attrs,text){

var doc = root.ownerDocument, svg = root;

while (svg.tagName!='svg') svg = svg.parentNode;

var el = doc.createElementNS(svg.namespaceURI,name);

for (var a in attrs){

if (!attrs.hasOwnProperty(a)) continue;

var p = a.split(':');

if (p[1]) el.setAttributeNS(svg.getAttribute('xmlns:'+p[0]),p[1],attrs[a]);

else el.setAttribute(a,attrs[a]);

}

if (text) el.appendChild(doc.createTextNode(text));

return root.appendChild(el);

}

在行动中,上述文件变得更加简单：

var svg = document.documentElement;

createOn(svg,'circle',{

cx:100, cy:200, r:50,

fill:'red', stroke:'black',

'stroke-width':'20px', 'stroke-opacity':0.5

});

// …function from above…

标签：javascript,dom,svg

来源： https://codeday.me/bug/20190610/1209062.html