Как добавить круг в файл svg?

Question

У меня есть отдельный файл svg, встроенный в html-файл, я хочу добавить круг к этому svg через javascript. Ниже то, что я сейчас:

var mySvg=document.getElementById("SVGDoc"); 
var svgDom=mySvg.getSVGDocument(); 

..... 

<object id="SVGDoc" type="image/svg+xml" data="3rdFloorVersion2.svg"></object> 

но, как я знаю, не существует никакого метода Append() для этого svgDom объекта. Кто-нибудь знает, как это решить? Я знаю, что есть решение, требующее скопировать содержимое svg внутри html-файла, но я хочу, чтобы они были разделены.

Answer 1

var circle = svgDom.createElementNS("http://www.w3.org/2000/svg", "circle"); 
circle.setAttribute("r", "10"); 
// etc for x, y 
svgDom.documentElement.appendChild(circle); 

Обратите внимание, что вы можете вызывать только mySvg.getSVGDocument() после OnLoad случае <object> тега уволила так что вам нужно сделать что-то вроде:

<object id="SVGDoc" onload="go()"...></object> 

<script> 
function go() { 
    var mySvg=document.getElementById("SVGDoc"); 
    var svgDom=mySvg.getSVGDocument(); 
    ... 
} 

</script>