Import an SVG node into another document in IE9

Question

After extracting the SVG document using XHR, I need to add part of it from the document responseXMLto the current document. Using this code works in Safari / Chrome / FireFox, but does not work on 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 raises a script error when importNode is called:

SCRIPT16386: support for such an interface is not supported

I found a question where someone else reports a similar problem. You can see a live example of this problem on my website . (The SVG file itself displays the fractal, uses XHR to get another SVG file , uses one method to manually import one of the nodes, and then tries importNodeto import another node. In one Chrome, Safari or Firefox, you see two gray diamonds imported into the document , while only the first diamond works on IE9.)

How can I do importNodework with IE9?

Answer 1

, "" node , importNode. .

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