無法在HTML DOM中顯示已解析的SVG節點。爲什麼？

Question

在下面的代碼中，我嘗試以兩種不同的方式在屏幕上創建一個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 = '<circle r="300"></circle>' 
      , 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中，並讓瀏覽器瞭解如何顯示它？

Answer 1

使用這樣的基礎（即SVG）命名空間有什麼問題？

<circle r="300" xmlns="http://www.w3.org/2000/svg"></circle>