Есть скрипт, он добавляет в 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);
Ответ
Браузеры постоянно совершенствуются. Если раньше обязательно было объявлять 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 для гарантированного кроссброузерного решения.
Комментариев нет:
Отправить комментарий