Chapter 6: SVG Transformations

---

Using the SVG translate Function

Consider the rectangles rendered in Figure 6.1.

Figure 6.1: Drawing rectangles with the SVG translate function.

The SVG document translateRect1.svg in Listing 6.1 demonstrates how to use the SVG translate function in order to shift a set of rectangles in the plane.

Listing 6.1 translateRect1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <g transform="translate(0,0)"> <rect    x="0" y="0" width="50" height="50"    style="fill:red;stroke:yellow"/> </g> <g transform="translate(50,50)"> <rect    x="0" y="0" width="50" height="50"    style="fill:green;stroke:red"/> </g> <g transform="translate(100,100)"> <rect    x="0" y="0" width="50" height="50"    style="fill:blue;stroke:green"/> </g> </svg>

Remarks

The SVG code in Listing 6.1 renders three rectangles (which also happen to be squares) with a fill color of red, green, and blue whose perimeter is yellow, red, and green, respectively. The upper-left vertex, width, and height values for all three rectangles are specified in the following line:

x="0" y="0" width="50" height="50"

The rectangles do not overlap because they are shifted downward and to the right by means of the following three SVG g elements:

<g transform="translate(0,0)"> <g transform="translate(50,50)"> <g transform="translate(100,100)">

Before rendering each rectangle, the enclosing SVG g element performs a simple shift of the origin. Specifically, the first SVG transform attribute does not perform any translation of the origin because the specified 'target' point is the same as the origin itself. The second SVG transform attribute translates the origin from the point (0,0) to the point (50,50), while the third SVG transform attribute translates the origin from the point (0,0) to the point (100,100).

Although the SVG transform attribute is very simple, it can be very useful for shifting graphics images of arbitrary complexity from the default origin (0,0) to any other point. This feature is extremely useful when rendering business charts that can be rendered by 'components' that consist of logically related graphics images. For example, the 'tic' marks and labels and line segment for the horizontal axis can be grouped together in one component that is enclosed in an SVG g element that has its own translation of the origin, while the corresponding component for the vertical axis can be contained in a separate SVG g element with a different translation of the origin.

---