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;
}

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

1 个答案: