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)" />


Figure 6-17. Rotation with (0,0) as center

( 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)" />


Figure 6-18. Rotation with (100,100) as center

( 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


To see SVG examples in HTML you need the SVG plugin:
Adobe SVG Viewer or Corel Viewer
You can also use Batik viewer to open SVG files.




SVG Tutorials
SVG Books
SVG Graphics
MapPoint
SVG Links


Turkey Calling Cards

XML Elves
XML and SVG Discussion
- Tim Bacon and Jeff Martin have released XMLUnit 1.2, an extension to the popular JUni
- The W3C CSS Working Group has published the last call working draft of CSS Color Modu

| Rainbow Seeker | SVG PHP


Map Visitors Learn SVG: Contact Learn SVG
©2002-2008 Learn SVG. All Rights Reserved.
Questions and comments to: learnsvg@gmail.com