Импорт внешнего SVG (с помощью WebKit)

Question

В Firefox 4 работает, но не в Chrome 10:найти способ обойти это.Я думал об использовании XMLHttpRequest для захвата внешнего файла и вставки его в элемент svg.Это вызовет какие-либо проблемы?Есть ли лучшие способы сделать это?

Answer 1

После получения документа SVG через XHR у вас будет отдельный XML-документ в свойстве xhr.responseXML.Поскольку вы не можете легально перемещать узлы из одного документа в другой, вам нужно импортировать нужную часть из одного документа в целевой документ, прежде чем вы сможете использовать его как часть этого документа.

Самый простой способ сделать это - использовать document.importNode():

var clone = document.importNode(nodeFromAnotherDoc,true);
// Now you can insert "clone" into your document

Однако это не работает для IE9 .Чтобы обойти эту ошибку, вы можете альтернативно использовать эту функцию для рекурсивного воссоздания иерархии узлов в документе по выбору:

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

Вы можете увидеть пример использования XHR для получения документа SVG и оба методаимпорт узла на мой сайт: http://phrogz.net/SVG/fetch_fragment.svg

Answer 2

В случае, если кто-то наткнется на эту страницу.Вот более простой способ использовать объект HTTP-запроса для извлечения файла svg:

window
    .fetch('/assets/ciphers.svg')
    .then(
        function (response) {
            return response.text();
        }
    ).then(
        function (body) {
            var div = document.createElement('div');
            div.innerHTML = body;
            while (div.children.length > 0) {
                document.head.appendChild(div.children[0]);
            }
        }
    );

Хитрость заключается в следующей строке (либо вы используете window.fetch или xmlHttpRequest, либо как угодно):

            var div = document.createElement('div');
            div.innerHTML = body;
            while (div.children.length > 0) {
                document.head.appendChild(div.children[0]);
            }

Answer 3

Я написал для этого простой и легкий полифилл: https://github.com/Keyamoon/svgxuse

Определяет, нужно ли отправлять HTTP-запрос. Если браузер по умолчанию не поддерживает внешние ссылки, он отправляет GET-запрос для извлечения и кэширования SVG.

Надеюсь, это поможет.

Answer 4

Я делаю много запросов AJAX для разметки SVG, где я вставляю разметку в DOM. Вы не можете просто вставить его как фрагмент, насколько я знаю, вы должны рекурсивно пройтись по извлеченному документу XML и создать отдельные элементы SVG.

Итак, вам лучше объединить файлы на сервере, прежде чем отправлять их в браузер.