Могу ли я получить содержимое элемента use, ссылающегося на внешний svg?

Я создаю веб-компонент, который отображает значки svg на странице в Shadow Dom. то есть 

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

У меня есть внешний файл svg sprite, в котором есть тонна иконок SVG.

Внутренние части веб-компонента отображают в Shadow Dom следующее: 

<svg>
    <use xlink:href="i.dist.svg#i-airplane"></use>
<svg>

Все правильно отображается на экране, но мне нужна некоторая информация, которая встроена в SVG, в частности информация, содержащаяся в viewbox, (например: viewBox="0 0 32 32").

Я знаю. то, что визуализируется в use, также вводится в теневой дом. Но я пытаюсь найти другой способ получения информации, вложенной в use. Я попытался сделать ajax содержимым svg, но это превращается в большую проблему для нескольких иконок на странице, так как каждый экземпляр веб-компонента теперь делает этот вызов. Как еще я мог это сделать?

Для справки:

Введите описание изображения здесь

1 3
javascript svg custom-element

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>) может быть не самым быстрым, но оно является самым простым для программирования и понимания. Это зависит от что вы действительно хотите сделать с атрибутами (и когда).

3