Почему SVG не прорисовывается без фиктивного апдейта?

Question

[Elvis]

Привет!
Вопрос такой: почему после генерации и добавления SVG посредством JS необходимо код фиктивно апдейтить? Именно с SVG такое, другие теги добавляются как и должны. вот пример наклепал. в первом случае мы генерируем SVG теги и добавляем в div. в конце есть закомментированный фиктивный апдейт. и далее тем же способом добавляется картинка. почему с закомментированным апдейтом svg не отображается, а если раскомментировать - всё прекрасно?
Этот пример маленький, но показательный. на самом деле я генерирую достаточно большое количество объектов, от 2000 до примерно 10000. И в данном случае фиктивный апдейт занимает очень много времени. зачем? - это уже другой вопрос, не в рамках данного топика обсуждать.
Виджет кодопена почему то не хочет работать

Comments

[Elvis]

Знаете что накопал?
если создавать SVG вместе с неймспейсом, то не нужен фиктивный апдейт.
То есть если из кодапена выше заменить:

let svg = document.createElement('svg');
let rect = document.createElement('rect');

На

let svgNS = "http://www.w3.org/2000/svg";
let svg = document.createElementNS(svgNS, "svg");
let rect = document.createElementNS(svgNS, 'rect');

То всё работает вроде как нужно. по крайне мере я убрал у себя везде фиктивный апдейт и все элементы сразу отображаются. Вопрос только в скорости остался и почему так происходит? есть может какая документация?

Answer 1

[Elvis]

Подсказали вот такую вот документацию Namespaces crash course
Там хорошо всё описывается. В разделе "Scripting in namespaced XML" описано какие методы нужно использовать когда работаешь с элементами с неймспейсом, в частности с SVG. Переписал свой код под данные спецификации - всё работает без нужды фиктивного ападейта.

Comments

[Kovalsky]

Шикарно, спасибо за инфу