Animate a svg in a pannel

[SamuelJoly]

I'm trying to animate a rectangle (rotation) on a pannel. My code doesn't work and I'm wondering why. I see the rectangle in the pannel, but it doesn't rotate. This is my code

I used this example : http://svg.dabbles.info/snaptut-transform-groups

Thanks

[MarcusCalidus]

Animation in Snap is best performed by defining the animation in onInit(). There ist the Animation example button in the plugin. Unfortunately this is only visible on dark dashboards ;)

The idea is to define the animation in onInit() like this:

this.draw = function() {
  this.angle--;
  var s = Snap(svgnode);
  var w = s.select("#wheel"); 
  w.attr({ transform: "rotate("+this.angle+" 23.592 19.5)"});
}

this.animate = function() {
    if (this.isVentilating) {  
      this.draw();
      window.requestAnimationFrame(this.animate.bind(this));
    }
}

this.stopAnimation = function() {
    this.isVentilating = false;
}

this.startAnimation = function() {
    if (!this.isVentilating) {
      this.isVentilating = true;
      this.animate();
    }
}

to start or stop the animation call the functions this.startAnimation() and this.stopAnimation() in onHandleMetric(). To have the animation start immediately, regardless of the data handled you can of course start the animation directly in onInit().