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
<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
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
Comments are closed.