SVG Transformations
SVG Transformations
SVG elements can be manipulated using transform functions.
The transform
attribute can be used with any
SVG element.
The transform
attribute defines a list of
transform functions that can be applied to an element and the element's
children:
translate()
scale()
rotate()
skewX()
skewY()
matrix()
Translate() Function
The translate()
function is used to move an object by
x
and y
.
Assume one object is placed with x="5" and y="5". Then another object contains transform="translate(50 0)", this means that the other object will be placed at x-position 55 (5 + 50) and at y-position 5 (5 + 0).
Let's look at some examples:
In this example, the red rectangle is translated/moved to the point (55,5) instead of (5,5):
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect
x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red"
transform="translate(50 0)" />
</svg>
Try it Yourself »
In this example, the red rectangle is translated/moved to the point (5,55) instead of (5,5):
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect
x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red"
transform="translate(0 50)" />
</svg>
Try it Yourself »
In this example, the red rectangle is translated/moved to the point (55,55) instead of (5,5):
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect
x="5" y="5" width="40" height="40" fill="blue" />
<rect x="5" y="5" width="40" height="40" fill="red"
transform="translate(50 50)" />
</svg>
Try it Yourself »
Scale() Function
The scale()
function is used to scale an object by
x
and y
. If y
is not provided, it is set to be equal to x
.
The scale()
function is used to change the
size of an object. It takes two numbers: the x scale factor and the y scale
factor. The x and y scale factors are taken as the ratio of the transformed
dimension to the original. For example, 0.5 shrinks the object by 50%.
In this example, the red circle is scaled to twice the size with the scale()
function:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50"
cy="25" r="20" fill="red" transform="scale(2)" />
</svg>
Try it Yourself »
In this example, the red circle is scaled vertically to twice the size with the scale()
function:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="70"
cy="25" r="20" fill="red" transform="scale(1,2)" />
</svg>
Try it Yourself »
In this example, the red circle is scaled horizontally to twice the size with the scale()
function:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="20" fill="yellow" />
<circle cx="50"
cy="25" r="20" fill="red" transform="scale(2,1)" />
</svg>
Try it Yourself »
Rotate() Function
The rotate()
function is used to rotate an object by a degree
.
In this example, the blue rectangle is rotated with 45 degrees:
Here is the SVG code:
Example
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="5" width="40" height="40" fill="blue" transform="rotate(45)"
/>
</svg>
Try it Yourself »
SkewX() Function
The skewX()
function is used to skew an object along the x
axis by
a degree
.
In this example, the blue rectangle is skewed along the x axis by 30 degrees:
Here is the SVG code:
Example
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue"
transform="skewX(30)"
/>
</svg>
Try it Yourself »
SkewY() Function
The skewY()
function is used to skew an object along the
y
axis by
a degree
.
In this example, the blue rectangle is skewed along the y axis by 30 degrees:
Here is the SVG code:
Example
<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<rect x="5" y="5" width="40" height="40" fill="blue"
transform="skewY(30)"
/>
</svg>
Try it Yourself »