如何在svg文件中追加圓圈？

Question

我有一個單獨的svg文件嵌入在html文件中，我想通過javascript向該svg添加一個圓。以下是我現在有：

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

..... 

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

但我知道，有此svgDom對象沒有append（）方法。任何人都知道如何解決此問題？我知道有一個解決方案需要複製HTML文件中的svg內容，但我想保持它們分開。

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); 

請注意，您只能在<object>標籤的onload事件後調用mySvg.getSVGDocument（）已被觸發，所以你需要做的是這樣的：

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

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

</script>