SVG Essentials, 2nd Edition

Chapter 6. Transforming the Coordinate System

Up to this point, all graphics have been displayed as is—drawn exactly where and how they are defined in their attributes. There will be times when you have a graphic you would like to rotate, scale, or move to a new location. To accomplish these tasks, you add the transform attribute to the appropriate SVG elements. This chapter examines the details of these transformations.

The translate Transformation

In Chapter 5, 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 6-1, which defines a square and draws it at the upper-left corner of the grid, then redraws it with the upper-left corner at coordinates (50,50). The dotted lines in Figure 6-1 aren’t part of the SVG, but serve to show the part of the canvas we’re interested in.

Example 6-1. Moving a graphic with use

<svg width="200px" height="200px" viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg">
    <g id="square">
        <rect x="0" y="0" width="20" height="20"
            style="fill: black; stroke-width: 2;"/>
    </g>
    <use xlink:href="#square" x="50" y="50"/>
</svg>

As it turns out, the x and y values are really shorthand for one form of the more general and more powerful transform attribute. Specifically, the x and y values are equivalent to an attribute like transform="translate(x-value, y-value)", where translate is a fancy technical term for move. The x-value and y-value are measured in the current user ...