SVG Transformation

SVG transformations create shapes in SVG images. For example, moving, scaling, and rotating shapes. This is a convenient method for displaying vertical or diagonal text.

Transformation example

This is a simple example:

<svg  xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect x="50" y="50" height="110" width="110"
　　　　　　　　　　style="stroke:#ff0000;  fill:  #ccccff"  transform="translate(30)  rotate(45　50　50)"
　　　　　　　　　　　　>
　　　　</rect>
　　　　<text  x="70" y="100"  transform="translate(30)  rotate(45　50　50)"
　　　　>oldtoolbag.com</text>
</svg>

Image effect after running:

Note<rect>element'stransform and <text>oftransformattribute. This attribute specifies the transformation to be applied to the shape. In this example, translation and rotation are applied. Both will be explained later in this article.

Which elements can be transformed?

You can apply transformations to all SVG shapes. You can also apply transformations to<g> 　 　elements, thus transforming the entire element group effectively in one go. Gradients and fill patterns can also be transformed.

Transformation functions

SVG provides four transformation functions:

• translate()

• rotate()

• scale()

• skew()

• matrix()

The following sections will give a more detailed explanation of each of these functions.

In fact, the transformation function does not transform the SVG shape itself, but transforms the base coordinate system of the shape. Therefore, even if the width is displayed in multiples, the width20 multiplied by2The shape still logically has20 in width.

move

translate()function to move the shape. You willx and y　 value totranslate()function. This is an example:

translate(50,25)

This example moves the shape along the x-axis50 units and move along the y-axis25units.

This is an example showing two shapes with equal positions and sizes, with and without translation:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#cc3333"/>
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#3333cc"  transform="translate(75,25)></rect>
</svg>

Image effect after running:

Please note that compared with the first (red) shape, the second (blue) shape moves along the x-axis75units, moving along the y-axis25units.

Rotation

rotate()The function rotates the shape around the point 0,0. This is an example showing a rectangle (outline) and the rotated15The equal rectangle after rotation (solid):

<svg　width="500"　height="150">
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　　></rect>
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15)"
　　　　　　　　></rect>
　　　　</svg>

Image effect after running:

If you want to rotate around any point except 0,0, then pass the x and y coordinates of the point totransformfunction. This is an example showing a non-rotated rectangle (outline) and an equivalent solid rectangle rotating around its center.15degrees:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　></rect>
<rect x="20" y="20"　width="40" height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15,　40,　40)"
　　　　　　　></rect>
</svg>

Image effect after running:

All rotations are clockwise, with angles ranging from 0 to360. If you want to rotate counterclockwise, pass negative degrees torotate()function.

Scale

scale()functions scale or shrink the shape proportionally.scale()functions can scale the shape size and its position coordinates. Therefore, with20 multiplied by2scaled by a ratio of20 and a height of3A rectangle with width20,20 at width40 and a height of60.

scale()The function can also scale the stroke width of the shape.

This is an example showing a rectangle located at10,0 at width20 and a height of2A rectangle with a width of 0 (blue), and an equivalent rectangle (black) with a scaling ratio of2:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; fill:none;"></rect>
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #000000; fill:none;"　transform="scale(2)></rect>
</svg>

Image effect after running:

Note how the position and size of the rectangle are scaled.

You can scale the shape along the x-axis and y-axis by other factors. To do this, you can addscale()functions provide x-scale and y-scale parameters, as shown below:

scale(2,3);

In this example, the shape is scaled along the x-axis2times, scaling the shape along the y-axis3times. Here is an example:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; fill:none;"></rect>
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #000000; fill:none;"　　transform="scale(2,3)></rect>
</svg>

Image effect after running:

Note how the stroke width of the scaled rectangle (black) is also scaled, and the scaling ratio is different on the x-axis and y-axis.

to scale to a mirror function

scale()by scaling along the x-axis or y-axis using-1scale, 　 　This function can be used as a mirror function. After completion, you must first move the shape in the x or y direction (translate) otherwise the mirrored shape will appear outside the SVG canvas.

Here is an example:

<svg　width="500"　height="150">
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(100, 0) scale(-1,　1) "　/></svg>

This is at x = 10resulting image of the line drawn at 0 (because the rectangle has been translated in the x-direction100).

Blue is the original shape. The black shape is the translated and scaled shape.

skew

skewX()andskewY()functions skew the x-axis and y-axis. In fact, these functions will skew the given axis based on a specified angle in degrees.

Here are some examples showing rectangles with differentskewX()some examples of rectangles with values.

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(10)"　/>
<rect x="100" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(45)"　/>
<rect x="150" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(60)"　/></svg>

Image effect after running:

As you can see,skewX()The function makes the vertical line appear as if it has been rotated by a given angle. Therefore,skewY()The function makes the horizontal line appear as if it has been rotated by a given angle. Here are some examples:

<svg　width="500"　height="150">
<rect x="10"　y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(60)"　/>
<rect x="100" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(45)"　/>
<rect x="150" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(10)"　/></svg>

Matrix

can also be represented as matrices. The matrix is as follows:

a　　c　　e
b　　d　　f
0　　0　　1

Since only the first6values, so only the matrix transformation function can be provided6values. Here is an example:

transform="matrix(a,b,c,d,e,f)"

Other transformation functions can be represented as matrices. Here are some examples:

Translate
1　　0　　tx
0　　1　　ty
0　　0　　　1
matrix(1,0,0,1,tx,ty)

Rotate
cos(a)　　　-sin(a)　　0
sin(a)　　　　cos(a)　　0
　　　　　0　　　　　　　　0　　　1
matrix(　cos(a),　sin(a),-sin(a),cos(a),0,0　)

Note: This valuecos(a)andsin(a)must be pre-calculated before inserting the matrix. This parameterais the rotation angle.

Scale
sx　　0　　0
　0　sy　　0
　0　　0　　1
matrix(sx,0,0,sy,0,0)

Skew transformations along the x-axis can be written as:

Skew
1　　tan(a)　　0
0　　　　　　　1　　0
0　　　　　　　0　　1
matrix(1,0,tan(a),1,0,0)

tan(a)values are insertedmatrix()must be pre-calculated before the function is used.

Skew transformations along the y-axis can be represented as:

Skew
1　　　　　　　0　　0
tan(a)　　1　　0
0　　　　　　　0　　1
matrix(1,tan(a),0,1,0,0)

This is an example of an SVG matrix transformation that mimics simple transformation functions:

<svg　width="500"　height="150">
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#cc3333"/>
<rect x="20" y="20"　width="50" height="50"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="matrix(1,0,0,1,100,20)"
　　　　　　　　/>
</svg>

Image effect after running:

Note how the rectangle on the right (blue) transforms compared to the one on the left (red).

Combining transformations

Transformation can be combined. You can combine transformations bytransformMultiple transformation functions can be placed within the attribute to achieve this.

This is an example of a rectangle that is first translated (moved) and then rotated. This example shows the rectangle (blue) before and after applying any transformation (black).

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc;　fill:none;"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(50,0) rotate(30)"　/>
</svg>

Image effect after running:

The order of transformation is important

The order of transformation is important. IntransformThe order of transformation functions specified within the attribute is the order in which they are applied to the shape.

The following examples illustrate the difference between first translating and then rotating, and first rotating and then translating shapes:

<svg　width="500"　height="150">
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke:　#000000;　stroke-width:　2px; fill:none"
　　　　　　　　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #3333cc; stroke-width:　2px; fill:none"
　　　　　　transform="translate(100,0) rotate(45)"　/>
<rect x="50" y="10" width="20" height="30"
　　　　　　style="stroke: #cc3333; stroke-width:　2px; fill:none"
　　　　　　transform="rotate(45) translate(100,0"　/>
</svg>

Image effect after running:

The black rectangle has not applied any transformation. First, translate the blue rectangle, then rotate. First rotate the red rectangle, then translate.