The rotate transform rotates the element by a number of degrees. This transform takes three arguments. The first is the number of degrees. The second and third arguments are x and y coordinates that define the point of origin for the rotation. If there is no point of origin for the element, the origin point of the viewport is used. This can be seen in the following two code samples, where nine rectangles are drawn on the SVG element. The first is not transformed. The next eight are rotated incrementally by ten degrees each:
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700" version="1.1"> <rect x="600" y="0" width="100" height="100" fill="rgba(255,0,0,.5)"/> <rect x="600" y="0" width="100" height="100" ...
