我可以獲取引用外部 svg 的 use 元素的內容嗎？

Question

我正在構建一個將 svg 圖標呈現到 Shadow Dom 頁面上的 Web 組件。 即

<ba-icon i="airplane"></ba-icon>

我有一個外部 svg sprite 文件，其中包含大量 SVG 圖標。

Web 組件的內部將以下內容渲染到 Shadow Dom 中：

<svg>
    <use xlink:href="i.dist.svg#i-airplane"></use>
<svg>

一切都在屏幕上正確呈現，但我想要一些嵌入在 SVG 內部的信息，特別是包含在viewbox的信息，（例如： viewBox="0 0 32 32" ）。

我知道在use渲染的內容也會輸入到 Shadow Dom 中。 但我試圖找到另一種獲取嵌入到use的信息的use 。 我試圖對 svg 的內容進行 ajax，但這對於頁面上的多個圖標來說變成了一個大問題，因為 Web 組件的每個實例現在都在進行該調用。 我還能怎么做？

供參考：

Answer 1

實際上有很多方法可以實現這一點，具體取決於您使用的 SVG 文件的結構以及您想要做什么。

將 SVG 精靈作為外部文件，您可以利用HTML 導入技術來解析文件：

<head>
...
  <link id="ic" rel="import" href="i.dist.svg">

  <script>
    document.registerElement( "ba-icon", { 
        prototype:  Object.create( HTMLElement.prototype, {
            createdCallback: {
                value: function () 
                {
                    var name = "i-" + this.getAttribute( 'i' )
                    var sh = this.createShadowRoot()
                    sh.innerHTML = '<svg><use xlink:href="i.dist.svg#' + name + '"/>'
                    this.setAttribute( "i-viewBox", ic.import.querySelector( 'svg#' + name ).getAttribute( "viewBox" ) )
                }
            }
        } )
    } )
  </script>
</head>

SVG 文件不會被導入兩次，因為它被瀏覽器緩存了。

注意：此解決方案（使用<use> ）可能不是最快的，但它最容易編碼和理解。 這取決於您真正想對屬性做什么（以及何時）。

Answer 2

從Chrome 80 中刪除了 HTML 導入。

使用替代方案，如Fetch() 。

我可以獲取引用外部 svg 的 use 元素的內容嗎？

問題描述

2 個解決方案

解決方案1
3 已采納 2016-07-15 15:56:58

解決方案2
0 2020-06-17 18:28:26

我可以獲取引用外部 svg 的 use 元素的內容嗎？

問題描述

2 個解決方案

解決方案1 3 已采納 2016-07-15 15:56:58

解決方案2 0 2020-06-17 18:28:26

解決方案1
3 已采納 2016-07-15 15:56:58

解決方案2
0 2020-06-17 18:28:26