Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
28
rated 0 times [  34] [ 6]  / answers: 1 / hits: 21441  / 11 Years ago, sat, november 30, 2013, 12:00:00

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.


More From » svg

 Answers
12

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.


[#73976] Thursday, November 28, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
luzv

Total Points: 178
Total Questions: 105
Total Answers: 114

Location: Palau
Member since Tue, May 30, 2023
1 Year ago
;