SVG Transformation Transformation functions
Example
Translate
translate moves graphics along specified vectors:
<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>
The first value is the x translation, and the second the y. If the y is omitted, it will default to 0.
Scale
scale resizes elements by specified ratios:
<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>
Like translate, the arguments are x, then y. However, in scale, if the y is omitted, it will default to the value of x; in other words, it scales the element without changing the aspect ratio.
Rotate
rotate rotates elements by specified angles.
<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>
The first value is the angle, in degrees. The transformation is applied clockwise. The other two values represent the point to be rotated around, defaulting to the origin.
