Transformation

Remarks#

Graphic elements can be altered by adding a transform attribute.

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

Instead of the top left origin being rendered at coordinates (0, 0), it will be shown down and right, from point (10, 10).

Whole groups of elements can be transformed together, and transformations can add to one another.

<svg xmlns="https://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

First, every point of the circle will be scaled with the factor 3 in relation to the origin, bringing the center of the circle to the middle of the rectangle at (15, 15) and its radius to 15. Then, the rectangle and the circle will be rotated together by 45 degrees clockwise around the origin.

translate

Move a rectangle 10 units to the right and 20 units down:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>

Move it 0 units horizontally and 20 units up:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>

Move it 10 units to the left and 0 units vertically:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>

scale

Scale a rectangle horizontally by factor 2 and vertically by factor 0.5:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="20" y="5" width="80" height="20" />
</svg>

Mirror a rectangle horizontally:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>

Scale does operate in relation to the origin, so this is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="-20" y="0" width="20" height="40" />
</svg>

rotate

Rotate a polygon clockwise by 90 degrees around the origin:

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 0,30 -20,15" />
</svg>

The center of rotation may be given explicitely:

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="30,0 30,30 10,15" />
</svg>

skewX, skewY

skew a polygon horizontally by 45 degrees:

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 60,30 30,30" />
</svg>

x values are computed as x + y * tan(angle), y values remain unchanged

skew a polygon vertically by 30 degrees:

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>

The result is equivalent to (allowing for rounding)

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>

x values remain unchanged, y values are computed as y + x * tan(angle)

matrix

Apply a transformation matrix to a polygon:

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>

Every point (x,y) will be transformed by applying matrix(a, b, c, d, e, f) like this:

┌ x_new ┐    ┌ a  c  e ┐ * ┌ x_old ┐   ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ =  └ b  d  f ┘   │ y_old │ = └ x_old * b + y_old * d + f ┘
                           └   1   ┘

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <polygon points="40,10 70,28 34,58 4,40" />
</svg>

Multiple transformations

Transformations can be concatenated and are applied right to left

Rotate a rectangle by 90 degrees and then move it down by 20 units and to the right by 20 units:

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="-10" y="-20" width="20" height="40"
        transform="translate(20 20) rotate(90)" />
</svg>

The result is equivalent to

<svg xmlns="https://www.w3.org/2000/svg">
    <rect x="0" y="10" width="40" height="20" />
</svg>