使用名稱空間創建SVG對象

Question

我試圖創建一個svg圖像和文本對象，這兩個對象都需要命名空間來設置xlink：href和xml：space屬性。我試着下面的代碼，沒有運氣創建這些對象，所以我可以將它們添加到屏幕上：

function createSVGNode(node) { 
    var svg = document.createElementNS('http://www.w3.org/1999/xlink', 'svg'); 
    var ns2 = null; 
    if(node.nodeName == 'image') { ns2 = 'http://www.w3.org/1999/xlink'; } 
    var shape = document.createElementNS(ns2, node.nodeName); 
    svg.appendChild(shape); 
    var ns = null; 
    for(var attr = 0; attr < node.attributes.length; attr++) { 
     if(node.nodeName == 'image' && node.attributes[attr].nodeName == 'xlink:href') { 
      ns = 'http://www.w3.org/1999/xlink'; 
     } 
     if(node.nodeName == 'text' && node.attributes[attr].nodeName == 'xml:space') { 
      ns = 'http://www.w3.org/XML/1998/namespace'; 
     } 
     shape.setAttributeNS(ns, node.attributes[attr].nodeName, node.attributes[attr].nodeValue); 
     ns = null; 
    } 
    if(node.childNodes.length == 1) shape.appendChild(node.childNodes[0]); 
    return shape; 
} 

我敢肯定，我會對此更難比我需要，但一切工作直到我不得不處理圖像和文本對象。

Answer 1

SVG元素都在SVG命名空間

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
var shape = document.createElementNS('http://www.w3.org/2000/svg', node.nodeName); 
svg.appendChild(shape); 
var ns = null; 
for(var attr = 0; attr < node.attributes.length; attr++) { 
    if(node.nodeName == 'image' && node.attributes[attr].nodeName == 'xlink:href') { 
     ns = 'http://www.w3.org/1999/xlink'; 
    } 
    if(node.nodeName == 'text' && node.attributes[attr].nodeName == 'xml:space') { 
     ns = 'http://www.w3.org/XML/1998/namespace'; 
    } 
    shape.setAttributeNS(ns, node.attributes[attr].nodeName, node.attributes[attr].nodeValue); 
    ns = null; 
} 
if(node.childNodes.length == 1) shape.appendChild(node.childNodes[0]); 
return shape;