Question

var svgElem = data.childNodes[0];//gets svg element

var insertSvgTag =      
  "<g transform="scale(0.34) translate(75,60)">" + svgElem.outerHTML + '</g>';

 var wrapper = document.createElement('div');
 wrapper.innerHTML = insertSvgTag;

最后，我必须将包装器作为另一个对象的子项追加。

当我看到innerHTML我得到额外的命名空间

 **xmlns:NS1=\"\"  NS1:xmlns:xml=\"http://www.w3.org/XML/1998/namespace\"**

我尝试了另一种方法：

var wrapper = document.**createElementNS**('http://www.w3.org/2000/svg', 'g');

wrapper.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');

wrapper.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');

这消除了额外的命名空间但是当我尝试将它添加到另一个svg对象时，我这次获得了相同的额外命名空间，同时将子节点添加到父节点。

这导致我的svg无法打开。

我google了很多。关注帖子：Internet Explorer XML/SVG Custom Namespacing - Extra/Wrong Namespaces Generated，我尝试过：新的DOMParser（）。parseFromString（内容，＆＃39; text / xml＆＃39;）它不适合我。我想我做错了什么。可以指出什么是错的吗？

@dmccabe @Thomas W

Answer 1

确定。想出了这个解决方案：

            var insertSvgTag =
            '<g transform="scale(0.34) translate(75,60)">' + svgElem.outerHTML + '</g>';

            var wrapper = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            wrapper.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg');
            wrapper.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
            wrapper.setAttribute("transform", "scale(0.34) translate(75,60)");

            var xmlString = insertSvgTag        
            , parser = new DOMParser()
            , doc = parser.parseFromString(xmlString, "image/svg+xml");
            doc.firstChild.firstChild.removeAttribute("requiredFeatures");                  
            doc.firstChild.firstChild.removeAttribute("requiredExtensions");
            doc.firstChild.firstChild.removeAttribute("systemLanguage");
            wrapper.appendChild(doc.firstChild.firstChild);

如paul在评论中所指出的，我不能将html元素添加到svg元素，反之亦然。如果你这样做，我会得到以下补充：

 xmlns:NS1=\"\"  NS1:xmlns:xml=\"http://www.w3.org/XML/1998/namespace\"

parser.parseFromString是将字符串转换为svg dom结构所必需的。在所有这些之后，svg 仍然没有出现。当我从正确显示的svg元素svg中删除以下三个属性时!!： requiredFeatures，requiredExtensions和systemLanguage //删除这些属性。

在IE中添加额外的命名空间，同时将xml附加到div

1 个答案: