Javascript 用图像替换SVG

我想用完全相同位置的图像替换这个SVG对象。 可能有一种CSS方法可以实现这一点，但出于一个特定的原因，我更愿意完全使用Javascript来实现这一点

<circle id="Sun" class="st0" cx="500" cy="300.8" r="30.3" onclick="changePic();"/>

“img/picture.png”

是文件夹和其中的图像

另外，Javascript中是否有一种方法可以在双击SVG时调用此函数，而不是单击一次。我知道这不是我所要求的，但如果我也能得到帮助，我将不胜感激

试试这个

var svg=document.getElementById（'Sun'）；
var src；//未定义
如果（svg）{
svg.addEventListener（'click'，函数（事件）{
var img=document.createElement（“img”）；
img.setAttribute（“Sun”、“im”）；
img.src=src | |“img/picture.png”；
this.parentNode.replaceChild（img，this）；
}，假）；
}

---

从父节点中删除svg元素，然后让它添加一个带有正确src的新标记，这难道不管用吗？

function changePic(src)
{
        var im = document.getElementById("Sun"); 
        im.setAttribute("Sun",  "im");
        im.setAttribute("src", src || "img/picture.png");       
}