Painting the Web

Transformations

The Hello World example from the last chapter used two forms of transformation: translate, to change the coordinate origin, and rotate, to change the rotation of the coordinate system. Both were changed using the transform attribute, in this case applied to the ellipse that formed the orbits around the small planet image.

The important point to remember from that example is that it's the coordinate system that's changed; the image just reflects the modification. This applies to all transforms:

translate (x, y)

Provides a translation (movement) of the x,y origin. If the y value is not provided, it's assumed to be 0.

scale (x, y)

Scales the coordinate system. If the y value is not set, it's assumed to be 0.

rotate (angle cx cy)

Rotates the coordinate system by the given angle about a point. If the optional cx and cy values are not given, it's assumed to be the origin of the current user coordinate system.

skewX (angle)

Performs a skew transform along the x-axis.

skewY (angle)

Performs a skew transform along the y-axis.

matrix (a b c d e f)

Applies a transformation matrix.

I don't want to get into matrix mathematics, so I won't be covering the matrix transform. I do recommend that you read more about the transform associated with the SVG specification at the W3C site. In the meantime, the other transforms can be demonstrated without having to resort directly to the math.

In earlier examples in this chapter, I used the translate transform to move complete images in order ...