• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Hour 14. Transforms > Transforming with the translate Property

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.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint