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 
});