How do I understand Transform properties in snap.svg?

Question

I have been trying to learn snap.svg and I have some doubts regarding the transform properties. My question is pretty stupid but here it is

In the following sample code, what do the the numbers mean?

     {"transform" : "t-10 0 s0 32 32"}
     {"transform" : "r180 32 32"}

I am guessing that s stands for scale, Also what is the difference between animAfter and after? I am very new to SVGs.

Answer 1

The transform format is a string that is a sequence of transforms, so you can have several after each other.

Edit: Snap doesn't make a distinction between upper/lower case these days, so this part does not make a difference (it maybe worth being aware of it though, in case you see some Raphael.js code and want to understand), the rest should still be relevant though...

T/t = Translate (t is relative, T is absolute) R/r = rotate(r is relative, R is absolute) S/s = scale(s is relative, S is absolute)

Its worth looking at the Raphael transform documentation if the Snap.svg doesn't have enough information, as there is a lot of overlap.

For transformations, some will reference a 'centre of origin' about which to rotate/scale etc, as sometimes you may want the centre of origin to be the object itself, sometimes 0,0, sometimes around a specific point.

t-10 0 s0 32 32 would translate x,y -10,0 and then scale x,y,cx,cy so scale 0 on the x, 32 on the way around cx 32.

r180 32 32 would rotate 180 degrees around point 32,32. You can normally use a comma or space to separate values.

after represents "attribute" values to set after the animation finishes. animafter represents "animation" values to set after the animation finishes.

Answer 2

Snap seems to use the same syntax as raphael. t is translate so thats translate -10 units in x. s is scale and r is rotate.