導入外部SVG（與WebKit的）

在Firefox 4以下的作品，而不是Chrome瀏覽器10：導入外部SVG（與WebKit的）

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

這是a known bug in Chrome/WebKit,所以沒有什麼我可以做的只是試圖找到一種方法來解決它。我想過使用XMLHttpRequest來抓取外部文件並將其插入到svg元素中。會造成什麼問題嗎？有沒有更好的方法來做到這一點？

來源

2011-03-23 Mike Baranczak

在邁克或@Progrog：可以編程方式測試這個'使用'功能沒有瀏覽器嗅探？ – 2011-10-07 22:43:39

相關問題 - http://stackoverflow.com/questions/1811116/ie-support-for-dom-importnode – resnyanskiy 2012-03-26 03:13:38

通過XHR獲取SVG文檔後，您將在xhr.responseXML屬性中擁有單獨的XML文檔。由於您無法合法地將節點從一個文檔移動到另一個文檔，因此您需要將一個文檔所需的部分導入目標文檔，然後才能將其作爲該文檔的一部分使用。

要做到這一點，最簡單的方法是使用document.importNode()：

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

然而，this does not work for IE9。要解決這個bug，您也可以使用此功能選擇的文件中遞歸地重新創建節點層次結構：

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

來源

2011-05-20 17:42:56 Phrogz

是的，我自己找到了importNode（）技巧。但後來我發現Android的WebKit版本根本不支持SVG，所以我決定完全忘記SVG，併爲這個項目使用普通的位圖圖像。 – 2011-05-20 18:52:44

（編輯：鏈接添加）這是非常好的。感謝Phrogz，感謝您對SVG的貢獻。你的[實驗室]（http：// phrogz。net/svg /）在構建[我的項目]（http://www.progettystudio.com）時不時幫助我。哇，我剛剛學到了[新東西]（http://phrogz.net/svg/textRendering.svg） – 2011-07-16 16:57:03

我爲SVG標記做了很多AJAX請求，我在DOM中插入標記。就我所知，您不能只將其作爲片段插入，您必須遞歸地遍歷檢索到的XML文檔，並創建單獨的SVG元素。

因此，在將它們發送到瀏覽器之前，將服務器上的文件組合起來可能會更好。

來源

2011-03-24 02:25:34

看到我的答案;除了作爲IE9的解決方法之外，還有一種將節點導入目標文檔的簡單方法：['importNode']（https://developer.mozilla.org/en/DOM/document.importNode）。 – Phrogz 2011-05-20 17:44:09

我寫了一個簡單而lighweight填充工具爲此：https://github.com/Keyamoon/svgxuse

它可以檢測它是否需要發送一個HTTP請求。如果瀏覽器默認不支持外部引用，它會發送一個GET請求來獲取並緩存SVG。

我希望這會有所幫助。

來源

2015-11-16 05:40:56 Keyamoon

萬一有人絆倒這個頁面。這是一個易於使用的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]); 
      }

來源

2015-12-18 16:11:59

哦，這裏有一個window.fetch的polyfill - > https://github.com/github/取 – 2015-12-18 16:12:44

導入外部SVG（與WebKit的）

回答

相關問題