Javascript 导入外部SVG（使用WebKit）

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

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

---

这就是我唯一能做的，就是想办法解决这个问题。我考虑使用

XMLHttpRequest

获取外部文件并将其插入

svg

元素。那会引起什么问题吗？有更好的方法吗？

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

---

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

通过XHR获取SVG文档后，在

XHR.responseXML

属性中会有一个单独的XML文档。由于无法合法地将节点从一个文档移动到另一个文档，因此需要将所需的部分从一个文档导入到目标文档中，然后才能将其用作该文档的一部分

最简单的方法是使用：

然而。要解决该错误，您也可以使用此函数在所选文档中递归地重新创建节点层次结构：

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

函数cloneToDoc（节点，文档）{
如果（！doc）doc=单据；
var clone=doc.createElements（node.namespaceURI，node.nodeName）；
对于（var i=0，len=node.attributes.length；i我已经为此编写了一个简单而轻量级的多边形填充：

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

我希望这能有所帮助。
以防有人无意中访问此页面。下面是一种使用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或其他工具）：

请看我的答案；除了作为IE9的解决方法之外，还有一种更简单的方法可以将节点导入目标文档：。是的，我自己发现了importNode（）技巧。但后来我发现Android版本的WebKit根本不支持SVG，所以我决定完全忘记SVG，只在这个项目中使用常规位图图像。（编辑：添加链接）这太棒了。谢谢你，Phrogz，感谢你对SVG的奉献。你在构建SVG的过程中不时帮助我。哇，我刚刚在Mike或@Phrogz学到了：你能通过编程测试这个
使用
功能而不使用浏览器嗅探吗？相关问题-
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]);
            }
        }
    );

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