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

【问题标题】：Extra namespace adding in IE while appending xml to div将 xml 附加到 div 时在 IE 中添加额外的命名空间
【发布时间】：2016-03-20 04:40:42
【问题描述】：

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 无法打开。

我搜索了很多。关注帖子：Internet Explorer XML/SVG Custom Namespacing - Extra/Wrong Namespaces Generated, 我试过： new DOMParser().parseFromString(content, 'text/xml') 它不适合我。我想我做错了什么。任何人都可以指出哪里出了问题？

@dmccabe @Thomas W

【问题讨论】：

SVG 组元素必须在 <svg> 元素内。您不能将它们直接插入<div>。

标签： javascript jquery html svg

【解决方案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);

正如保罗在评论中指出的那样，我不能将 html 元素添加到 svg 元素，反之亦然。如果你这样做了，那么我会添加以下内容：

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

parser.parseFromString 需要将字符串转换为 svg dom 结构。毕竟，svg 仍然没有出现。当我 从 svg 元素中删除以下三个属性时，svg 正确显示！！： requiredFeatures,requiredExtensions and systemLanguage //去掉这些属性。

【讨论】：