文章/答案/技术大牛

发布

社区首页 >问答首页 >setTimeout与snap.svg的结合

问setTimeout与snap.svg的结合
EN

Stack Overflow用户

提问于 2015-09-05 02:14:18

回答 1查看 768关注 0票数 1

我已经使用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"));
});

我也试着用其他的方法(在上面的评论部分中显示)，但它也没有起作用，我不知道我做错了什么。有人请帮忙或建议任何其他方法。

html

svg

snap.svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-05 03:27:10

更新：

你需要使用：

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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32408885

复制

相似问题

问setTimeout与snap.svg的结合
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问setTimeout与snap.svg的结合EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问setTimeout与snap.svg的结合
EN