问题
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.
回答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.
回答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.
来源：https://stackoverflow.com/questions/20302801/how-do-i-understand-transform-properties-in-snap-svg