All SVG graphic elements have a "transform" attribute. This attribute can be set and changed to various values in order to move and distort the element. A transform attribute takes a list of transformations, which are applied in reverse order. The available transformations include:

matrix(<a> <b> <c> <d> <e> <f>) defines a 2x3 matrix (or a six-number array) that is multiplied to the element's coordinates. See the comments for the other transformations below for the meaning of each member of this matrix.

translate(<tx> [<ty>]) will move the element <tx> units along the x-axis and <ty> units along the y-axis. In the full six-number array, <tx> and <ty> are the last 2 numbers of the array.

scale(<sx> [<sy>]) will scale the element by factor of <sx> and <sy> from the centerpoint (0,0). If <sy> is not given, it is assumed to be the same as <sx>. For example, if the value of <sx> is "0.5," the element will be scaled to 50% of the original width. In the full six-number array, <sx> and <sy> are the first and fourth numbers of the array.

To scale using a centerpoint other than (0,0), you must translate the element so that the centerpoint becomes (0,0), perform the scale, then translate the element back to its original location. For example, to scale an element by 50% centered on (150,100), you must set the transform attribute to "translate(150 100) scale(.5) translate(-150 -100)" (note the reverse order).

rotate(<rotate-angle>) will rotate the element <rotate-angle> degrees around the centerpoint (0,0). For example, if the value of <rotate-angle> is "45," the element will be rotated 45 degrees clockwise. As in the scale transformation, you can rotate using other centerpoints by enclosing the rotate inside translate transformations.

skewX(<angle>) will skew the x-axis of the element <angle> degrees from the centerpoint (0,0). In the full six-number array, <angle>, expressed in radians, is the third number of the array.

skewY(<angle>) will skew the y-axis of the element <angle> degrees from the centerpoint (0,0). In the full six-number array, <angle>, expressed in radians, is the second number of the array.

In the form below, enter different values for any of the transformations in the boxes below, then click the Add button to see their effect. The transformations are cumulative and the result is shown in the multi-line box at the bottom. Click the Reset button to erase all current transformations: