6.5 The rotate transformation
It is also possible to rotate the coordinate system by a specified angle. In the default
coordinate system, angle measure increases as you rotate clockwise, with a horizontal
line having an angle of zero degrees. Unless you specify otherwise, the center of rotation (a fancy term for the "pivot point") is
presumed to be (0, 0).
Example 1
Rotation around the default center point (0,0) by 45$^{\circ}$
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="10" width="20" height="20" style="fill:gray"/>
<line x1="0" y1="0" x2="50" y2="10" style="stroke:gray; stroke-dasharray:2 2"/>
<rect x="50" y="10" width="20" height="20" transform="rotate(45)" style="fill:gray"/>
<line x1="0" y1="0" x2="50" y2="10" transform="rotate(45)" style="stroke:gray; stroke-dasharray:2 2"/>
</svg>
Example 2
Rotation around a given center point (50,50) by $45^{\circ}, 90^{\circ},135^{\circ},180^{\circ},225^{\circ},270^{\circ}, 315^{\circ}$ clockwise
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" style="fill:none; stroke:gray"/>
<line x1="50" y1="50" x2="80" y2="50" style="stroke:red; stroke-width:1"/>
<polygon points="80 47, 90 50, 80 53, 80 45" style="fill:red"/>
<defs>
<g id="arrow">
<line x1="50" y1="50" x2="80" y2="50" style="stroke:black; stroke-width:1"/>
<polygon points="80 47, 90 50, 80 53, 80 45" style="fill:black"/>
</g>
</defs>
<use xlink:href="#arrow" transform="rotate(45, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(90, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(135, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(180, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(225, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(270, 50, 50)"/>
<use xlink:href="#arrow" transform="rotate(315, 50, 50)"/>
</svg>