Вставка SVG как строка работает, но не как элемент

Question

Я хочу сохранить значки SVG как разметку <symbol> в localStorage, а затем вставить их после DOMContentLoaded.

В идеале я бы использовал document.createElement('svg') и вставил бы элемент перед первым узлом в document.body.

Однако (по крайней мере, в Chrome) значок не появится, пока я не установлю innerHTML для div в качестве строкового представления <svg> элемента , а затем вставим div вдокумент.

Вот упрощенный пример:

var sprites = document.getElementById('sprites');

var circles = [
  '<symbol id="circle-yellow"><circle cx="25" cy="25" r="20" fill="yellow" /></symbol>',
  '<symbol id="circle-blue"><circle cx="25" cy="25" r="20" fill="blue" /></symbol>'
];

// Insert the yellow circle symbol by creating an SVG element.
var yellowDiv = document.createElement('div');
var yellow = document.createElement('svg');
yellow.innerHTML = circles[0];
yellowDiv.appendChild(yellow);
sprites.appendChild(yellowDiv);

// Insert the blue circle symbol by inserting the SVG string.
var blueDiv = document.createElement('div');
blueDiv.innerHTML = '<svg>' + circles[1] + '</svg>';
sprites.appendChild(blueDiv);

#sprites {
  dispay: none;
}

svg {
  border: 2px solid black;
}

<svg height="50" width="50"><use href="#circle-yellow"></use></svg>

<svg height="50" width="50"><use href="#circle-blue"></use></svg>

<!-- Will hold <svg> elements referred to by <use> elements. -->
<div id="sprites"></div>

Почему не появляется желтый круг?

Я подозреваю, что это как-то связано с элементом <svg> для желтого круга, который не отображается как поле размером 150x300 в нижней части страницы (что смущает меня, потому что оба элемента <svg> являются потомкамиdiv с display: none, и ни один из них не должен быть видимым).

Answer 1

Если вы отладите document.createElement('svg').constructor, вы увидите, что он фактически создан как HTMLUnknownElement:

> document.createElement('svg').constructor;
< ƒ HTMLUnknownElement() { [native code] }

Это потому, что SVG не является частью HTML;это должно быть пространство имен, чтобы работать.Попробуйте это:

document.createElementNS("http://www.w3.org/2000/svg", "svg");