設置顯示時不顯示SVG圖像無

Question

我編寫了一個web應用程序，在這個圖像中有一些標記，我將它設置爲none。像示例代碼一樣。我的問題是，當我在一些設備上運行圖像無法加載。當我設置圖像只顯示空白顯示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <g id="gimg"> 
 
     <image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/> 
 
    </g> 
 
    <rect id="myrect" x="100" y="100" width="20" height="20"></rect> 
 
</svg> 
 
<script> 
 
$("#myrect").on("click",function(){ 
 
    $("#img").show(); 
 
}); 
 
    
 
</script>

Answer 1

如果問題出在手機試試這個：

$("#myrect").on("click",function(){ 
    $("#img").show(); 
    return false; 

}); 

Answer 2

你能添加樣式=顯示：無你的圖像元素

<image id="img" style="display:none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px"/>. 

這應該加載圖片

Answer 3

您是否試過這種方式？

<svg> 
<defs> 
<symbol id="my-icon" viewBox="0 0 30 30"> 
    <rect id="myrect" x="25" y="25" width="20" height="20" /> 
</defs> 
</symbol> 
<image id="img" display="none" xlink:href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="50px" width="50px" /> 

</svg> 


$("#myrect").on("click", function() { 
$("#img").show(); 
}); 

只要改變視框等，以您的需求。 我希望這可以幫助。