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 with the translate Property

The most common transformation is translate—the function that moves an object a set distance from its original coordinates. To move an object, you will need to apply transform="translate(x,y)" to your desired element. In this case, “x,y” refers to the horizontal and vertical distance from the object's original x,y coordinates, not from the SVG document's (0,0) coordinates.

To demonstrate, you can move the sun in the news center graphic 50 units up and 50 units to the left. First, copy the code from Listing 13.2 and paste it into a new document. Next, add transform="translate(–50,–50)" to the circle element (line 28) that defines the sun's shape. This is shown in Listing 14.1.

Listing 14.1. Using the

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