|
||||||||
Rotate The rotate transformation is used to rotate an element by a certain angle. Syntax: rotate(angle [, cx, cy]) angle rotation angle in degrees, can be positive and negative cx x-center of rotation, optional cy y- center of rotation, optional We apply that rotate transformation to our screw in its simplest form. <use xlink:href="#screw" transform="rotate(25)" />
( view this picture as svg ) This results in a rotation around the blue origin - yes it is the origin of the reference coordinate system the screw is rotated about, as we'll see later. The angle's value 25 is given in degrees. The rotation occurs clockwise since we have a positive angle's value. The mathematicians among you may cry out loud, because this is the mathematical negative direction. They are right when referring to a Cartesian coordinate system with the y-axis up. Since we have a coordinate system with its y-axis down, the positive rotation angle is directed clockwise. Now we want to explore the effect of using the other two parameters of the rotate transform. We write <use xlink:href="#screw" transform="rotate(25, 100,100)" />
( view this picture as svg ) With this we forced the screw to be rotated about the point (100,100) marked with the little blue pin. The coordinates of this pivot are in the reference coordinate system with the blue axes. So we learned about the rotate transformation: the rotation occurs about the reference system's origin by default if an additional pivot point (cx,cy) is given in reference system's coordinates, the rotation occurs about that point. the rotation angle's value has to be provided in degrees. the rotation angle can be positive or negative. A positive value results in a clockwise rotation. With the rotate transformation the pivot coordinates only remain unchanged. This is also the transformation centre. a rotation angle of zero results in the identity transformation, i.e. the transformation, that leaves the element unaffected. The inverse rotation transformation to rotate(angle) is rotate(-angle), i.e. these transformations applied subsequently to an element leaves the element unaffected (identity transformation). chapters: intro toc intro sample svg elements toc svg elements sample |
|
|||||||
|
| Rainbow Seeker | SVG PHP
Learn SVG: Contact Learn SVG
©2002-2008 Learn SVG. All Rights Reserved. Questions and comments to: learnsvg@gmail.com |
||||||||