Замена SVG на изображение

Question

Я хочу заменить этот объект SVG изображением в том же положении. Вероятно, есть способ CSS, но по определенной причине я бы предпочел, чтобы это полностью сработало с использованием Javascript!

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

Это функция, которая, вероятно, нуждается в некоторой настройке.

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

"img/picture.png" - это папка и изображение внутри.

Кроме того, есть ли способ в Javascript вызвать эту функцию, когда SVG дважды щелкнут, в отличие от одного щелчка. Я знаю, что это не то, что я просил, но я был бы признателен, если бы мне тоже помогли с этим.

Answer 1

Попробуйте

var svg = document.getElementById('Sun'); 
 

 
var src; // undefined 
 

 
if (svg) { 
 
    svg.addEventListener('click', function(event) { 
 
    var img = document.createElement("img"); 
 
    img.setAttribute("Sun", "im"); 
 
    img.src = src || "img/picture.png"; 
 

 
    this.parentNode.replaceChild(img, this); 
 
    }, false); 
 
}

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

 
<svg id="Sun" class="st0" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle cx="50" cy="50" r="25" fill="#191919" /> 
 
</svg>