Question

我正在构建一个Web组件，它将svg图标渲染到Shadow Dom中的页面上。即。

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

我有一个外部的svg精灵文件，里面有很多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的信息的方法。我试图ajax svg的内容，但这对于页面上的多个图标来说变成了一个大问题，因为Web组件的每个实例现在正在进行该调用。我怎么能这样做？

供参考：

Answer 1

实际上，根据您使用的SVG文件的结构以及您想要做的事情，有一些方法可以实现此目的。

使用SVG sprite作为外部文件，您可以利用 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

已从Chrome 80中删除了HTML导入。

使用Fetch()之类的替代项。

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

2 个答案: