Добрый день, у меня такая проблема, я вставляю в html страницу сгенерированный SVG-Sprite с помощью внешнего файла js (чтобы этот спрайт кешировался на стороне клиента) с содержимым:
$("body").append('<svg> <symbol id="test">..</symbol ></svg>');
Вывожу на экран иконку через
<use xlink:href="#test">
Так все замечательно работает и отображается,но спрайт большой и при вставке увеличивается общее число узлов DOM , это сказывается на производительности. В итоге встал вопрос как оптимизировать,
идея была вставлять в shadow dom, с помощью
var root = elem.attachShadow(mode:open);
root.innerHTML = "<svg> <symbol id="test">..</symbol ></svg>";
спрайт вставляется в shadow dom и вконсоле разработчика видно,
но я не могу обратиться к элементу id="test" и соответственно вставить иконку через use,
так же была идея вставлять через тег
<template id="svg-sprite">
<svg> <symbol id="test">..</symbol ></svg>
</template>
,но к сожалению опять не могу обратиться к id="test". Подскажите куда копать и какие есть идеи на этот счет.
Заранее благодарен
Простой