Javascript 我可以获取引用外部svg的use元素的内容吗？
我正在构建一个web组件，在ShadowDOM中将svg图标呈现到页面上。i、 eJavascript 我可以获取引用外部svg的use元素的内容吗？,javascript,svg,web-component,custom-element,html-imports,Javascript,Svg,Web Component,Custom Element,Html Imports,我正在构建一个web组件，在ShadowDOM中将svg图标呈现到页面上。i、 e <ba-icon i="airplane"></ba-icon> 我有一个外部svg精灵文件，里面有很多svg图标 web组件的内部将以下内容呈现到阴影Dom中： <svg> <use xlink:href="i.dist.svg#i-airplane"></use> <svg> 所有内容都正确地呈现在屏幕上，但我需要SV
<ba-icon i="airplane"></ba-icon>
<svg>
<use xlink:href="i.dist.svg#i-airplane"></use>
<svg>
viewboxviewbox=“0 0 32”useuse实际上，有很多方法可以实现这一点，具体取决于您使用的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>
...
文件注册表项（“ba图标”{
prototype:Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）
{
var name=“i-”+此.getAttribute（'i'）
var sh=this.createShadowRoot（）
sh.innerHTML=“”
this.setAttribute（“i-viewBox”、ic.import.querySelector（'svg#'+name）.getAttribute（“viewBox”））
}
}
} )
} )
使用类似的替代方法。您总是可以将这些信息从原始SVG中获取到自定义元素中。@Supersharp，我不确定是否遵循。当您在引用外部svg的页面上放置svg（
/images/sprite.svg#some iconI.dist.svguse