[英]Can I get the contents of a use element that is referencing an external svg?
我正在构建一个将 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 组件的每个实例现在都在进行该调用。 我还能怎么做?
供参考:
实际上有很多方法可以实现这一点,具体取决于您使用的 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>
)可能不是最快的,但它最容易编码和理解。 这取决于您真正想对属性做什么(以及何时)。
从Chrome 80 中删除了 HTML 导入。
使用替代方案,如Fetch() 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.