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
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
"0 0 200 200"
"fill: black; stroke-width: 2;"
As it turns out, the
y values are really shorthand for one form of the more general and more powerful
transform attribute. Specifically, the
y values are equivalent to an attribute like
translate is a fancy technical term for move. The x-value and y-value are measured in the current user ...