Почему добавление элементов в SVG через JavaScript не работает?

#javascript #svg

Есть скрипт, он добавляет в SVG круг, в саму HTML разметку этот кргу добавляется,
можно проверить через отладчик, но у меня в браузере этот круг не выводится. То есть
HTML обновилась но добавленные элементы не нарисовались.

При этом сам сгенерированный SVG - валидный, это можно проверить скопировав его из
отладчика. Ещё проще можно проверить прямо в отладчике нажать редактировать HTML и
добавить перед SVG например пробел и сохранить, круг сразу же появляется.

Почему так и как исправить?



var svg = document.getElementById("svg1");

var circle = document.createElement("circle");

circle.setAttribute("cx", 110);
circle.setAttribute("cy", 20);
circle.setAttribute("r", 50);
circle.setAttribute("fill", "green");

svg.appendChild(circle);




    

Ответы

Ответ 1

Браузеры постоянно совершенствуются. Если раньше обязательно было объявлять namespace
для svg кода:
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink",

то теперь этого можно не делать, будет работать, но не всегда должным образом.
Например, если вы напишите viewbox вместо правильного написания - "viewBox", то парсер
не выдаст сообщение об ошибке, так как для HTML нет разницы в каком регистре написаны
буквы. Но для svg регистр чувствителен и команда не сработает.   Поэтому лучше всегда
 указывать namespace.
Также и с командами Javascript для создания объектов SVG  Лучше всегда, вместо команды
setAttribute использовать setAttributeNS для гарантированного кроссброузерного решения.