How do I scale an svg element with animate?

Question

Similar questions appear to have been asked before, however none of the solutions seem to work for me so here is my code:

this.animate({scale(2, 2, vinerBBoxX, vinerBBoxY)}, 100, mina.easeinout);

vinerBBoxX is the x centre of the element and vinerBBoxY is the y centre, both have worked fine when scaling without animating.

I have had trouble with scaling generally and there are so many solutions on the web that I found completely impenetrable. Please help!

Answer 1

Snap uses its own string format for transforms. s stands for scale, and by default it will scale around its centre.

The attribute to animate is 'transform' as opposes to scale (transform can take scale as a part of a string when set, eg transform: 'scale(2,2)', but this wouldn't work as an animation as it is.

The simplest way is like this...

g.animate({ transform: 's2,4'}, 2000)

You can combine transform elements as well, like

g.animate({ transform: 't200,200s2,4'}, 2000)

In order to translate 't' 200,200 followed by scalex,y 's' 2,4

jsfiddle