javascript - 如何将圆圈附加到svg文件？

Question

我在 html 文件中嵌入了一个单独的 svg 文件，我想通过 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>