导入外部 SVG（使用 WebKit）

Question

以下内容适用于 Firefox 4，但不适用于 Chrome 10：

<svg:svg version="1.1">
    <svg:use xlink:href="some_file.svg#layer1"/>
</svg:svg>

这是已知错误在 Chrome/WebKit 中， 所以除了尝试找到一种解决方法之外，我对此无能为力。我考虑过使用 XMLHttpRequest 来获取外部文件并将其插入到 svg 元素中。这会引起任何问题吗？有更好的方法吗？

Answer 1

通过 XHR 获取 SVG 文档后，您将在 xhr.responseXML 属性中拥有一个单独的 XML 文档。由于您无法合法地将节点从一个文档移动到另一个文档，因此您需要将所需的部分从一个文档导入到目标文档中，然后才能将其用作该文档的一部分。

最简单的方法是使用 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

我为此编写了一个简单且轻量级的填充： https://github.com/Keyamoon/svgxuse

它检测是否需要发送 HTTP 请求。如果浏览器默认不支持外部引用，它会发送 GET 请求来获取并缓存 SVG。

我希望这有帮助。

Answer 3

我对 SVG 标记执行了大量 AJAX 请求，其中我将标记插入到 DOM 中。据我所知，您不能只是将其作为片段插入，您必须递归地遍历检索到的 XML 文档，并创建单独的 SVG 元素。

因此，在将文件发送到浏览器之前，您最好先合并服务器上的文件。

Answer 4

万一有人偶然发现此页面。这是使用 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]);
            }