SVG顯示

Question

這裏是我的html

<div id="parent_div" style="display:none"> 
    <svg width=400 height=200>elements of svg in here</svg> 
</div> 
<button onclick="showParentDiv();" /> 

這裏是我的javascript

function showParentDiv() 
{ 
    //I need a svg onload event is fired after its parent div is shown. 
    //End function 
    $("#parent_div").show(); 
} 

感謝您的幫助

Answer 1

甚至還有「呈現完畢」沒有SVG，但有一個「load」事件儘可能多的HTML元素有。當SVG完成解析SVG並加載任何外部引用時，加載事件觸發。它應該適合您的需求。

如果您有多個SVG，那麼您需要跟蹤所有加載事件何時觸發，並在收到所有加載事件時顯示div。

下面是演示了一個SVG元素的過程如何工作的演示。

var mydiv = document.getElementById("mydiv"); 
 
var mysvg = document.getElementById("mysvg"); 
 

 
mysvg.addEventListener("load", function(evt) { 
 
    
 
    mydiv.style.display = "block"; 
 
    
 
});

<div id="mydiv" style="display: none"> 
 
    
 
    <svg id="mysvg"> 
 
    <circle cx="75" cy="75" r="75" fill="deepskyblue"/> 
 
    <circle cx="225" cy="75" r="75" fill="goldenrod"/>\ 
 
    </svg> 
 
    
 
</div> 
 
    

Answer 2

如果我理解正確的話，你想在完成.Show（）之後執行某些操作。按照documentation，你可以做類似的東西，這個附加功能到完成事件：

$("#parent_div").show("slow",function() { 
    // Insert code after "show" is done here 
});