如何添加圆圈到SVG文件

how to append circle to svg file?

本文关键字：SVG 文件 何添加 添加      更新时间：2023-09-26

我有一个单独的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()方法。有人知道怎么解吗?我知道有一种解决方案需要将svg内容复制到html文件中，但我希望将它们分开。

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>
相关文章：