Есть скрипт, он добавляет в 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);
<svg id="svg1" style="width:400px; height:150px; background-color: pink;">
<rect x="20" y="20" width="100" height="60" fill="blue" />
</svg>