Импорт узла SVG в другой документ в IE9 - PullRequest
Новая
       26

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

2 голосов
/ 20 мая 2011

После извлечения документа 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 для импорта другого узла. One Chrome, Safariили в Firefox вы видите два серых алмаза, импортированных в документ, в то время как в IE9 работает только первый алмаз.)

Как заставить importNode работать с IE9?

1 Ответ

3 голосов
/ 20 мая 2011

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