如何获得SVG DOM根目录,并以编程方式开始向它添加子项,而不是通过标记添加SVG元素?如何操作SVG DOM并创建元素?
3
A
回答
8
<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
电话,我经常使用这样的功能:
// 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);
}
在行动,上述文件变得更简单:
<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>
+0
只是注意'版本'和'baseProfile'是相当无用的。 –
+0
@ErikDahlström哦?很高兴知道。鉴于你是谁,我想我必须信任你。我之前一直信任[本页]的建议(https://jwatt.org/svg/authoring/),其中说,_“相反,始终在根
相关问题
- 1. 如何创建DOM元素?
- 2. 操作Dom元素
- 3. 如何捕捉DOM元素的创建并使用jQuery来操作它们
- 4. 创建DOM元素
- 5. Angular2 + Typescript:如何操作DOM元素?
- 6. 在dom外创建元素并使用jQuery操纵它们
- 7. 如何为HTML DOM元素创建XPATH?
- 8. jQuery AJAX - 创建DOM元素
- 9. jQuery的DOM元素创建
- 10. 动态DOM元素创建
- 11. DOM对应的SVG元素
- 12. 访问在Adobe Illustrator中创建的SVG DOM /'g'元素
- 13. 从jQuery选择器创建DOM元素
- 14. 为什么在创建DOM元素时不存在DOM元素?
- 15. 如何让jquery Tooltipster Plugin为新创建的DOM元素工作?
- 16. 稍后将创建的操作元素
- 17. 创建DOM元素时运行函数
- 18. 动态操作AngularJS中的DOM元素
- 19. ,javascript可以操作DOM元素吗?
- 20. DOM操作在AngularJS中添加元素
- 21. 从旧的HTML DOM元素创建JSON
- 22. 创建使用jQuery性能DOM元素
- 23. 从javascript中创建DOM元素
- 24. 如何在创建某个元素时进行操作
- 25. 如何使用不同的元素和操作创建列表?
- 26. Greasemonkey&jQuery如何操作刚创建的元素?
- 27. 如何操作现有SVG中元素的图层?
- 28. 如何使用硒在svg元素内执行拖放操作?
- 29. 如何操作JavaScript的SVG元素样式?
- 30. 如何样式/操作SVG的内容USE元素
'doc.documentElement'? – mc10