How Do You Animate Path Morphs Inside Of Loaded Svg With Snap.svg?

I know you can animate path morhs with snap.svg (How to animate path morphs using snap.svg) Is it possible to 'load' a path and then animate path morph? Or do you HAVE to define th

Solution 1:

You can animate following a load or whatever really, the main thing is that the variables are defined somewhere accessible, and the animation is only run after the load.

In this particular case, the main error is that you are defining the arm, forearm, bicep variables within the Snap.load function, and then trying to use them in your animation function (which isn't aware of those variables).

Couple of options...

1. make arm, forearm, bicep all global variables ( use 'var' at the beginning of your script, if all the relevant bits are in an immediate mode function, it should limit scope which maybe better ). This is probably the simplest.

2. Write your animation with a select...

   s.select('#forearm').animate({
               'transform': 'r45,320,120'
           }, 1000, mina.linear, anim2);