Transforming Using the rotate Property

Rotation is possible by applying transform="rotate(A)" to your desired element. In this case, “A” refers to the angle of the rotation. A positive angle value will rotate an object in a clockwise direction, whereas a negative value defines a counterclockwise direction. The rotation will occur around the object's top-left corner (the (0,0) coordinates).

As you can imagine, the sun from previous examples might not be a good test case for rotation. Instead, you can rotate a simple object like a rectangle in the center of your document. As Listing 13.5 used such a shape, open that document, copy its code, and paste it into a new document. Next, add a transform attribute to the rect element (line 6 in Listing ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.