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

5. Transforming the Coordinate System > The translate Transformation

The translate Transformation

In Chapter 4, you saw that you can use x and y attributes with the <use> element to place a group of graphic objects at a specific place. Look at the SVG in Example 5-1, which defines a square and draws it at the upper left corner of the grid, then re-draws it with the upper left corner at coordinates (50, 50). The dotted lines in Figure 5-1 aren’t part of the SVG, but serve to show the part of the canvas that we’re interested in.

Example 5-1. Moving a graphic with use
<svg width="200px" height="200px" viewBox="0 0 200 200">
    <g id="square">
        <rect x="0" y="0" width="20" height="20"
            style="fill: black; stroke-width: 2;"/>
    </g>
    <use xlink:href="/getfile?safari4=true&item=/images/0596002238/assets/#square" x="50" y="50"/>
</svg>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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