如何操作SVG DOM并创建元素? [英] How do I manipulate the SVG DOM and create elements?
本文介绍了如何操作SVG DOM并创建元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何获取SVG DOM根,并以编程方式开始添加子项,而不是通过标记添加SVG元素?
How do I get the SVG DOM root, and start adding children to it, programmatically, instead of adding SVG elements by markup?
推荐答案
<svg xmlns="http://www.w3.org/2000/svg">
<script>
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);
</script>
</svg>
在行动中看到: http://phrogz.net/SVG/create-circle.svg
因为它可以这样很麻烦地发布所有这些 setAttribute
调用,我经常使用这样的功能:
Because it can be so cumbersome to issue all those setAttribute
calls, I often use a function like this:
// 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);
}
在行动中,上述文件变得更简单:
In action, the above file becomes more simply:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<script>
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…
</script>
</svg>
在行动中看到: http://phrogz.net/svg/create-circle-2.svg
这篇关于如何操作SVG DOM并创建元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文