Transformation

Meaning

Parameters

rotate

Defines a rotation about a point

angle, x and y defining a clock-wise rotation of angle degrees about the point (x,y)

angle defining a clock-wise rotation of angle degrees about the origin

transform = rotate(angle [x y])

Explanation

This result in a rotation around the green origin. Remember that the square does not move. It is the entire coordinate system that has been rotated.

Since we have a coordinate system with its y-axis down, the positive rotation angle is directed clockwise.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Draw the axes as a guide in the original coordinate system -->
<g>
<g fill="none" stroke="blue" stroke-width="3" >
<line x1="0" y1="1.5" x2="150" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>

<!--A normal square -->
<rect x="60" y="15" width="30" height="30" style="fill:green"/>

<!--A rotated square -->
<rect x="60" y="15" width="30" height="30" transform="rotate(45)" style="fill:red"/>

</svg>