用圖像替換SVG

我想用完全相同位置的圖像替換此SVG對象。可能有一種CSS方法可以解決這個問題，但出於具體的原因，我寧願完全使用Javascript解決這個問題！用圖像替換SVG

<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，而不是一次點擊。我知道這不是我所問的，但我會很感激，如果我也得到了幫助。

來源

2016-05-15 JohnMichael

難道它的工作只是刪除從父節點的SVG元素，然後把它添加一個新的標籤用正確的SRC？ – MrKickkiller

試試這個

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>

來源

2016-05-15 09:01:14 DININDU

用圖像替換SVG

回答

相關問題