我可以获取引用外部 svg 的 use 元素的内容吗？答案

【问题标题】：Can I get the contents of a use element that is referencing an external svg?我可以获取引用外部 svg 的 use 元素的内容吗？
【发布时间】：2016-07-14 22:04:54
【问题描述】：

我正在构建一个在 Shadow Dom 中将 svg 图标呈现到页面上的 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 中的信息。我试图对 svg 的内容进行 ajax 处理，但这对于页面上的多个图标来说变成了一个大问题，因为 Web 组件的每个实例现在都在进行该调用。我还能怎么做？

供参考：

【问题讨论】：

您始终可以将这些信息从原始 SVG 中获取到您的自定义元素中。
@Supersharp，我不确定我是否跟随。当您将 svg 放在引用外部 svg (/images/sprite.svg#some-icon) 的页面上时，浏览器会将其视为外部资源，并会以与任何图像相同的方式请求该“sprite”文件。唯一的区别是通过 ID (#some-icon) 从 sprite 文件中提取特定符号。我没有将原始 svg 内联到页面中。

标签： javascript svg web-component custom-element html-imports

【解决方案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>）可能不是最快的，但它是最简单的编码和理解。这取决于您真正想对属性做什么（以及何时）。

【讨论】：

这非常有效，好主意！我没有考虑导入i.dist.svg 文件。但是这样做，让我可以获取 viewBox 数据，以便我可以解析一些维度。由于 sprite 文件现在本质上是一个我可以查询的文档，因此我能够使用符号的子节点，这样我就可以避免使用 use。
是的，我认为使用符号的子节点也是一种更好的方法。

【解决方案2】：

已从 Chrome 80 中删除 HTML 导入。

使用 Fetch() 之类的替代方法。

【讨论】：