Objective: Learn to use the transform attribute and it's value options

The transform=" " attribute can be used in any element to change it's various layout properties.  This is almost identical to CSS transforms except it is more powerful and more challenging to master.

13.1 The transform attribute

The transform=" " attribute must always be used within an element. Eg:

<rect transform="translate(x,y)"></rect>

13.2 transform value options

translate(x,y) change the default position of a shape on the drawing to the x,y coordinate position set by translate.

rotate(deg, cx, cy) rotate a shape by a set number of degrees around the rotation center you define using cx cy.

scale(2) change the size of a shape larger or smaller than the default size using a simple multiplier. This value can be from 0 up to any practical multipler.

skewX(45) Angular distortion of a shape horizontally. The value is degrees.

skewY(45) Angular distortion of a shape vertically. The value is degrees.

SVG Editor for transform-translate()

Three rectangles are drawn on top of each other. They are then moved to different positions in the image using different translate(x,y) values.

SVG Editor for transform-rotate()

Three rectangles are drawn on top of each other. They are then rotated to different angles using different rotate(deg cx cy) values. Rotate is with respect to the objects start position so you need to use cx and cy to set the center of rotation.

You need to practice and get comfortable with adjusting cx and cy positioning and how that affects the center of the rotation.

In this example the rotated rectangles go outside of the image. The viewBox has been shifted to the left so all rectangles are in the visible image area. Try setting the viewBox="0,0,400,200" to see what happens.

SVG Editor for transform-scale()

The reference rectangle is blue. The orange rectangle has scale(2), the yellow scale(1.5) and the red rectangle scale(0.5) applied.

The green rectangle is scaled differently on the X and Y axis using scale(2, 0.5).

Note that the x, y, start coordinates and stroke width also scales.

SVG Editor for transform-skewX() and skewY()

You can skew a shape on the X or Y axis. The red rectangle has scewX(20) applied, the orange rectangle has skewY(20) applied.

To control skew positioning it it best to draw the shape with x="0" and y="0" and then use translate(x,y) to move it to the required position. This can be seen with the yellow rectangle.

13.3  Using Multiple Transform values

It is possible to use multiple transform values on any element. They are rendered in the order you create them from left to right. The following three examples all have the same transform property values, but they are inserted in a different order in each case.

The black rectangle has this transform: transform="rotate(90) scale(3) translate(100,0)"

The red rectangle has this transform: transform="translate(100,0) rotate(90) scale(3)"

The blue rectangle has this transform: transform="scale(3) translate(50,0) rotate(90)"

Transforms are amazingly useful in combining various elements of an illustration and reusing existing ones. To make this even more powerful and useful we are now moving on the awesome <g> element. <g> means group.