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