0

我正在尝试创建一个 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;
}

我确信我要做的比我需要的要困难得多，但是在我不得不处理图像和文本对象之前，一切都在工作。

4

1 回答 1

0

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;
于 2013-10-10T14:29:41.997 回答