在下面的代码中,我尝试以两种不同的方式在屏幕上创建一个SVG圆。无法在HTML DOM中显示已解析的SVG节点。为什么?
var body = document.getElementsByTagName('body')[0];
var vis = document.createElementNS("http://www.w3.org/2000/svg", "svg");
body.appendChild(vis);
vis.setAttribute('width',400);
vis.setAttribute('height',300);
var xmlString = ''
, parser = new DOMParser()
, doc = parser.parseFromString(xmlString, "text/xml");
c1 = doc.firstChild;
c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute('r','300')
//for(x in c1) {c1[x] = c2[x]}
vis.appendChild(c1);
第一种方式vis.appendChild(c1);不显示,但是,如果我在该行与C2它的工作原理更换C1。此外,如果我放回c1,然后取消将基本上将c2克隆到c1的行的注释,它仍然不起作用。
所以我知道如果我不使用基本命名空间http://www.w3.org/2000/svg,但浏览器不理解“圆”是什么,但我不知道如何解决它。
问题:如何解析任意svg字符串,将其插入到DOM中,并让浏览器了解如何显示它?
2012-03-15
JnBrymn