How To Transform SVG Elements

With adding transform attributes to the appropriate SVG elements, you can move a SVG graphic to a new location, rotate, or scale. The value of the transform attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided. The individual transform definitions used to transform elements can be separated by white space or a comma. You can transform graphic elements with the following types of transform definitions.

Table of Contents

Transform Using Translate

Using translate property in SVG, you can transform a group of graphic objects at a specific place. There are two ways of moving graphic objects, which are given as follows.

Moving a graphic with use

The element, <use> lets you re-use a portion of an SVG file. Using the optional attributes x, y, you can specify the position of graphical contents of the referenced element onto a rectangular region. Here is an example taken from the previous post for creating basic elements used in SVG DOM, where <use> element copy and paste all the shapes of both groups and sets its position 20px right and 10px bottom from the original shapes.

<svg xmlns=”http://www.w3.org/2000/svg”>
<g id=”triangle1″ fill=”red” >
<polygon points=”60,10 10,70 110,70″ />
</g>
<g id=”triangle2″ fill=”blue” >
<polygon points=”60,80 10,130 110,130″ />
</g>
<rect width=”250″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />

<use xlink:href=”#triangle1″ x=”130″ y=”5″/>
<use xlink:href=”#triangle2″ x=”130″ y=”5″/>
</svg>

Moving the coordinate system with translation

Another method of transforming a graphic element using translation is moving the coordinate system with using <translate> element, where (<tx> [<ty>]), specifies a translation by tx and ty. If <ty> is not provided, it is assumed to be zero.

Following is an example of using <translate> element in svg, where <translate> element translates all the shapes and sets its position 130px right and 70px bottom from the original shapes.

<svg width=”250px” height=”200px”>
<g id=”square” fill=”blue” >
<rect x=”5″ y=”5″ width=”60″ height=”60″ />
</g>
<use xlink:href=”#square” transform=”translate(130,70)”/>
<rect width=”250″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>

Transform Using Scale

It is possible to make an object appear larger or smaller than the original size at which it was defined by scaling the coordinate system using scale property in SVG. You can scale the original graphic either with specifying single value, which scales all x and y coordinates by the given value or with specifying two values, which scales all x coordinates by the given x-value and all y-coordinates by the given y-value.The property scale(<sx> [<sy>]), specifies a scale operation by sx and sy, if <sy> is not provided, it is assumed to be equal to <sx>.

In the following example, <scale> element scales a graphic element and sets its size two times larger then original shape.

<svg width=”280px” height=”200px”>
<g id=”square” fill=”blue” >
<rect x=”5″ y=”5″ width=”60″ height=”60″ />
</g>
<use xlink:href=”#square” x=”50″ y=”5″ transform=”scale(2,2)”/>
<rect width=”250″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>

Transform Using Rotate

Another way of transforming SVG graphic elements is using rotate property. Rotate property in SVG, makes possible to rotate the coordinate system by a specified angle and centerX and centerY specify the center of rotation. In the default coordinate system, angle measure increases as you rotate clockwise, with a horizontal line having an angle of zero degrees.

Here are the examples of rotate(<rotate-angle> [<cx> <cy>]), which specifies a rotation by <rotate-angle> degrees about a given point. If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system.

Rotation around the origin

<svg width=”280px” height=”200px”>
<rect x=”25″ y=”25″ width=”70″ height=”70″ fill=”blue”/>
<rect x=”140″ y=”-115″ width=”70″ height=”70″ transform=”rotate(45)” fill=”red”/>
<rect width=”250″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>

Rotation around a center point

<svg width=”280px” height=”200px”>
<!– center of rotation –>
<circle cx=”70″ cy=”70″ r=”5″ style=”fill: red;” />
<!– non-rotated arrow –>
<g id=”arrow” style=”stroke: blue; stroke-width:8;”>
<line x1=”80″ y1=”70″ x2=”140″ y2=”70″ />
<polygon points=”140 70, 130 65, 130 75″ />
</g>
<!– rotated around center point –>
<use xlink:href=”#arrow” transform=”rotate(60, 70, 70)” />
<use xlink:href=”#arrow” transform=”rotate(110, 70, 70)” />
<use xlink:href=”#arrow” transform=”rotate(-140, 70 70)” />

<rect width=”250″ height=”150″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>

Transform Using SkewX and SkewY

SVG has two other transformations skewX and skewY, which allows you to skew one of the axes. The general form is skewX(angle) and skewY(angle). SkewX property in SVG Skews all x-coordinates by the specified angle, which makes vertical lines appear at an angle.

The skewX transformation skews all x-coordinates by the specified angle, leaving y-coordinates unchanged. The skewY transformation skews all y-coordinates leaving x-coordinates unchanged, by the specified angle, which makes horizontal lines appear at an angle.

Uses of skewX and skewY

<svg width=”280px” height=”200px”>
<rect x=”10″ y=”15″ width=”50″ height=”50″ fill=”blue”/>
<text x=”100″ y=”10″>skewX</text>
<rect x=”90″ y=”10″ width=”50″ height=”50″ transform=”skewX(40)” fill=”red”/>
<text x=”100″ y=”90″>skewY</text>
<rect x=”90″ y=”10″ width=”50″ height=”50″ transform=”skewY(40)” fill=”red”/>
<rect width=”250″ height=”180″
fill=”none” stroke=”blue” stroke-width=”2″ />
</svg>

skewX

skewY