将setTimeout与snap.svg一起使用_Svg_Snap.svg_Html

将setTimeout与snap.svg一起使用

svg html

将setTimeout与snap.svg一起使用,svg,snap.svg,html,Svg,Snap.svg,Html,我已使用加载了一个外部文件，并希望某个部分id=city\u在页面加载后3秒，使用淡入动画显示整个文件简化标记： <body style="height:100%;overflow:hidden"> <div class="viewport show home" id="home"> <svg id="svg" ></svg> </div> </body> 我也试着用上面评论部分所示的其他方法来做

我已使用加载了一个外部文件，并希望某个部分id=city\u在页面加载后3秒，使用淡入动画显示整个文件

简化标记：

<body style="height:100%;overflow:hidden">
    <div class="viewport show home" id="home">
    <svg id="svg" ></svg>
    </div>
</body>

我也试着用上面评论部分所示的其他方法来做，但也不起作用。我无法找出我做错了什么。请有人提供帮助或其他建议。

更新：

您需要使用：

var city_w = Snap('#city_whole');

例如：

您需要使用：

var city_w = Snap('#city_whole');

例如：

使用var city_w=Snap'city_other'后；我收到控制台错误Uncaught TypeError:无法读取null的属性“animate”，它仍然不起作用。如果DOM中存在city_-whole，则Snapcity_-whole将返回一个具有适当上下文的对象来操作city_-whole的属性。在你的情况下，整个城市并不存在。确保已创建整个城市。当svg最终在页面中构建时，请尝试检查它的DOM。我认为DOM中确实存在city_整体，因为当我使用var s=Snapsvg时；s、 attr{viewBox:[0,0,1200,600]}；Snap.loadshilp6.svg，函数f{var city_w=f.select'city_other'；svg_-been；函数svg_-been{city_w.animate{opacity:1}，3000，mina.backout；}s.appendf.selectcity_other；}；我可以在没有延迟的情况下轻松制作动画。如果希望城市整体在三秒后显示为可见，城市整体最初必须为style=opacity:0；。您的函数使从不透明度：0到不透明度：1的转换100%可见。我已经更新了我的答案。在使用var city_w=Snap'city_other'之后；我收到控制台错误Uncaught TypeError:无法读取null的属性“animate”，它仍然不起作用。如果DOM中存在city_-whole，则Snapcity_-whole将返回一个具有适当上下文的对象来操作city_-whole的属性。在你的情况下，整个城市并不存在。确保已创建整个城市。当svg最终在页面中构建时，请尝试检查它的DOM。我认为DOM中确实存在city_整体，因为当我使用var s=Snapsvg时；s、 attr{viewBox:[0,0,1200,600]}；Snap.loadshilp6.svg，函数f{var city_w=f.select'city_other'；svg_-been；函数svg_-been{city_w.animate{opacity:1}，3000，mina.backout；}s.appendf.selectcity_other；}；我可以在没有延迟的情况下轻松制作动画。如果希望城市整体在三秒后显示为可见，城市整体最初必须为style=opacity:0；。您的函数使从不透明度：0到不透明度：1的转换100%可见。我已经更新了我的答案。