Нашли частичный ответ здесь и воспроизведены ниже. Обратите внимание, что этот подход заставляет вас самостоятельно создавать корневые теги и атрибуты <svg> в javascript, а не просто загружать весь документ svg, который есть в примере вашего вопроса.
Динамическое создание корневого элемента SVG аналогично прямому внедрению в веб-страницу. Вам не нужно создавать тег SCRIPT, как если бы вы непосредственно встраивали SVG при загрузке страницы:
<script type="image/svg+xml">
<svg>
...
</svg>
</script>
Вместо этого вы следуете процессу, аналогичному описанному выше:
// create SVG root element
var svg = document.createElementNS(svgns, 'svg'); // don't need to pass in 'true'
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');
// create an example circle and append it to SVG root element
var circle = document.createElementNS(svgns, 'circle');
svg.appendChild(circle);
Необходимо использовать обратный вызов, чтобы узнать, когда SVG добавляется на страницу (это незначительно
отклонение от стандарта). Ниже перечислены поддерживаемые способы сделать это:
svg.addEventListener('SVGLoad', function() {
svg = this; // this will correctly refer to your SVG root
alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
alert('loaded!');
}
Теперь добавьте корень SVG в наш документ
svgweb.appendChild(svg, document.body); // note that we call svgweb.appendChild
Обратите внимание, что в приведенном выше коде мы должны использовать прослушиватель событий, чтобы знать, когда корень SVG завершает загрузку на страницу; это небольшое отклонение от стандарта, необходимого для магии SVG Web.
Родитель, которого вы прикрепляете либо к своему корню SVG, уже должен быть присоединен к реальному DOM на вашей странице (т. Е. Его нельзя отключить от страницы).