O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required