The default SVG angular measurement system is laid out as the diagram shows, increasing as we move clockwise from the horizontal.
When we wish to rotate an object, we have to understand how this will work.
Starting with the dark blue square, we apply a rotation command to rotate it 45° clockwise.
The light blue square is the result of this command.
<rect x=250 y=70 width=75 height=75 fill="lightblue" transform="rotate(45)"/>
This is likely not what was wanted - the object was rotated around the origin of the grid (0,0). To rotate it about a center point, we have to include the x and y coordinates.
Unless specified, rotation occurs around the origin point (0,0).
Syntax: rotate(angle,xvalue,yvalue)
To correct this, and rotate the object around itself, we have to supply the x and y coordinates.
The light green square shows a rotation about the center of the orignal blue square.
<rect x=250 y=70 width=80 height=80 fill="lightgreen" transform="rotate(45,290,110)"/>
The x value is determined by taking the starting x value of the original square (250) and adding ½ the width: 250 + (80 / 2) = 290.
Likewise the y value is determined by taking the original y value (70) and adding ½ the height: 70 + (80 / 2) = 110.
View the source code of this page to see how the orange lines are drawn in the illustration.
Finding the center of most objects is usually a similar process, but some may require some mathematics.
A curious note: 'rotator' is a palindrome!