将 setTimeout 与 snap.svg 一起使用

Question

我加载了一个外部 svgfile using snap.svg 并希望它的某个部分 (id="city_whole") 在页面加载后 3 秒出现并带有淡入动画。

简化标记：

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

这是我的文档准备功能：

var s = Snap("#svg");
s.attr({
  viewBox: [0, 0, 1200, 600]
});

Snap.load("shilp6.svg", function(f) {
  var city_w = f.select('#city_whole');
  setTimeout(function() {
    city_w.animate({
      opacity: 1
    }, 3000, mina.backout)
  }, 3000);
  //setTimeout(svg_appear, 3000);
  //function svg_appear() {
  //    city_w.animate({opacity: 1},3000,mina.backout);
  //}
  s.append(f.select("#city_whole"));
});

我也尝试过其他方式（在上面的评论部分显示）但它也没有 worked.I 我无法弄清楚我做错了什么。有人请帮助或建议任何其他方式。

Answer 1

已更新：

您需要使用：

var city_w = Snap('#city_whole');

示例：

var s = Snap("#svg");
s.attr({
  viewBox: [0, 0, 1200, 600]
});
Snap.load("https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg", function(f) {
  s.append(f); // First: add the external svg image in the DOM.
  
  var city_w = Snap('#path119');
  setTimeout(function() {
    city_w.animate({
      opacity: 0
    }, 3000, mina.backout);
  }, 3000);
});

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>

参考：http://jsfiddle.net/dannyjhonston/k3zp3dva/2/

将 setTimeout 与 snap.svg 一起使用

Using setTimeout with snap.svg

html

svg

snap.svg