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"はフォルダ内の画像です。

また、ワンクリックではなく、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>