Импорт узла SVG в другой документ в IE9

Question

После получения документа SVG с использованием XHR мне нужно добавить его часть из 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: такой интерфейс не поддерживается

Я нашел вопрос, где кто-то еще сообщает о подобной проблеме. Вы можете увидеть живой пример этой проблемы на моем сайте. (Сам файл SVG отображает фрактал, использует XHR для извлечения другого файла SVG, использует один метод, чтобы вручную импортировать один из узлов, а затем пытается использовать importNode импортировать другой узел. На одном Chrome, Safari или Firefox вы видите два серых бриллианта, импортированных в документ, в то время как на IE9 работает только первый бриллиант.)

Как я могу сделать importNode работать с IE9?

Answer 1

Вот обходное решение, которое вручную "импортирует" узел, используя пользовательскую функцию для рекурсивного клонирования всех его частей вместо использования 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;
}