Как заставить браузер отрисовать SVG из спрайта, добаленный динамически из JS?

Question

В веб приложении нужно динамически добавить во view иконки, которые хранятся в svg-спрайте. Проблема в том, что иконки отрисовываются только если прописаны в HTML, а если добавлять через createElement и appendChild то элемент естественно появляется в DOM, но графика не рисуется. Вот "тестовый стенд":

function LoadIcon(id) {
    let svg = document.createElement('svg');
    svg.className = 'icon';
    svg.innerHTML = '<use href="#power"></use>';
    document.body.appendChild(svg);
}

[class*="icon"] {
    fill: black;
    width: 24px;
    height: 24px;
    margin: 4px;
    cursor: pointer;
}
[class*="icon"]:hover { fill: red; }

<html>
<head>
<title>Test SVG</title>
<svg display="none">
    <symbol id="power" viewBox="0 0 32 32">
        <g>
            <path d="M 16,0 A 2,1.9998779 0 0 0 14,1.9998779 V 13.999146 a 2,1.9998779 0 0 0 2,1.999878 2,1.9998779 0 0 0 2,-1.999878 V 1.9998779 A 2,1.9998779 0 0 0 16,0 Z m 9.927734,4.0993592 a 2,1.9998779 0 0 0 -1.439453,0.5859017 2,1.9998779 0 0 0 0,2.8299054 c 3.43644,3.4362377 4.461351,8.5876637 2.601563,13.0773267 -1.859789,4.489663 -6.228034,7.407751 -11.087891,7.407751 -4.859857,0 -9.228102,-2.918089 -11.0878905,-7.407751 C 3.0542739,16.10283 4.0791854,10.951404 7.515625,7.5151663 a 2,1.9998779 0 0 0 0,-2.8299054 A 2,1.9998779 0 0 0 6.125,4.1013122 2,1.9998779 0 0 0 4.6875,4.6852609 C 0.11519279,9.2572995 -1.2557643,16.149995 1.21875,22.12365 3.6932642,28.097304 9.5357317,32 16.001953,32 22.468175,32 28.310642,28.097304 30.785156,22.12365 33.25967,16.149995 31.888714,9.2572992 27.316406,4.6852609 A 2,1.9998779 0 0 0 25.927734,4.0993592 Z" />
        </g>
    </symbol>
</svg>
</head>
<body onload="LoadIcon('power')">
</body>
</html>

Если в body дописать следующий код, то иконка рендерится:

<svg class="icon">
<use href="#power"></use>
</svg>

Но надо оперировать иконками на уровне JS. Как заставить браузер рендерить "динамические" SVG?

Answer 1

В общем SVG будет отрисовываться если записать его полный код в innerHTML родительского элемента. Например так:

let icon = document.createElement("div");
icon.innerHTML = '<svg><use href="#power"></use></svg>';
someParent.appendChild(icon);

Видимо реднер <svg> не работает при appendChild, так как этот тег является instanceof HTMLUnknownElement. Но это лишь предположение. )

БЛОГ НА HUSL

Как заставить браузер отрисовать SVG из спрайта, добаленный динамически из JS?

Ответы (1 шт):