Search code examples
htmlsvgsnap.svg

Using setTimeout with snap.svg

I've loaded an external file using and want a certain part (id="city_whole") of it to appear 3 sec after page loading with fade in animation.

Simplified Markup:

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

This is my Document ready function:

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

I also tried doing it other way (shown above in commented part) but it also didn't worked.I am not able to figure out what am i doing wrong. Somebody please help or suggest any other way.

Solution

  • Updated:

    You need to use:

    var city_w = Snap('#city_whole');

    Example:

    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>

    Reference: http://jsfiddle.net/dannyjhonston/k3zp3dva/2/