我可以获取引用外部 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 中渲染的内容也会输入到阴影 Dom 中。但我正在尝试寻找另一种方法来获取嵌入到 use 中的信息。我尝试 ajax svg 的内容，但这对页面上的多个图标来说是个大问题，因为 Web 组件的每个实例现在都在进行该调用。我还能怎么做？

供参考：

Answer 1

实际上有很多方法可以实现这一点，具体取决于您使用的 SVG 文件的结构以及您想要执行的操作。

将 SVG 精灵作为外部文件，您可以利用 HTML Imports 技术来解析文件：

<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

HTML 从 Chrome 80.

移除导入

使用类似 .

的替代方法

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

Can I get the contents of a use element that is referencing an external svg?

javascript

svg

web-component

custom-element

html-imports