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>

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

1 个答案: