Question

我已使用svg加载了一个外部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"));
});

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

Answer 1

更新：

您需要使用：

var city_w = Snap('#city_whole');

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

将setTimeout与snap.svg一起使用

1 个答案: