将 SVG 节点导入 IE9 中的另一个文档

Question

使用 XHR 获取 SVG 文档后，我需要将其中的一部分从 responseXML 文档附加到当前文档中。使用此代码适用于 Safari/Chrome/FireFox，但不适用于 IE9：

var xhr = new XMLHttpRequest;
xhr.open('get','stirling4.svg',true);
xhr.onreadystatechange = function(){
  if (xhr.readyState != 4) return;
  var g = xhr.responseXML.getElementsByTagName('g')[2];
  var p = document.getElementsByTagName('path')[0];
  p.parentNode.insertBefore(document.importNode(g,true),p);
};
xhr.send();

IE9调用importNode时抛出脚本错误：

SCRIPT16386：不支持此类接口

我在a question 找到了其他人报告类似问题的地方。你可以看到这个问题的一个活生生的例子on my website。 （SVG 文件本身显示分形，使用 XHR 获取 another SVG file，使用一种技术手动导入其中一个节点，然后尝试使用 importNode 导入另一个节点。您会看到两个 Chrome、Safari 或 Firefox将灰色菱形导入到文档中，而在 IE9 上只有第一个菱形有效。）

如何让importNode 与 IE9 一起工作？

Answer 1

这是一个解决方法，它通过使用自定义函数手动“导入”节点，以递归方式克隆节点的所有部分，而不是使用importNode。此代码用于my example page 以导入两个形状之一。

var xhr = new XMLHttpRequest;
xhr.open('get','stirling4.svg',true);
xhr.onreadystatechange = function(){
  if (xhr.readyState != 4) return;
  var g = xhr.responseXML.getElementsByTagName('g')[2];
  var p = document.getElementsByTagName('path')[0];
  p.parentNode.insertBefore(cloneToDoc(g),p);
};
xhr.send();

function cloneToDoc(node,doc){
  if (!doc) doc=document;
  var clone = doc.createElementNS(node.namespaceURI,node.nodeName);
  for (var i=0,len=node.attributes.length;i<len;++i){
    var a = node.attributes[i];
    clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue);
  }
  for (var i=0,len=node.childNodes.length;i<len;++i){
    var c = node.childNodes[i];
    clone.insertBefore(
      c.nodeType==1 ? cloneToDoc(c,doc) : doc.createTextNode(c.nodeValue),
      null
    );
  }
  return clone;
}