Transformation

Meaning

Parameters

scale

Defines a scaling of the X and Y coordinates

x and y defining the scaling in the X and Y directions
transform = "scale(x [y])"

The amount of scaling in the x and y directions can be controlled separately, but if only one value is specified, it will be used for both.

skewX

Defines a skew along the X axis

angle degrees defining a skew of the X position by Y*tan(angle)
skewX(angle)

The skewX transformation "pushes" all the x-coordinates by the specified angle. Visually, this makes vertical lines appear at an angle.

skewY

Defines a skew along the Y axis

angle degrees defining a skew of the Y position by X*tan(angle)
skewY(angle)

The skewY transformation "pushes" all the y-coordinates by the specified angle. Visually, this makes horizontal lines appear at an angle.

Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="500">

<!-- Scale Example - Center of scaling -->
<circle cx="50" cy="50" r="2" style="fill:red"/>

<!-- Non-scale rectangle -->
<g>
<g id="box" style="fill:none;stroke:green">
<rect x="35" y="40" width="30" height="20" />
</g>

<!--Scaled rectangle around a center point -->
<use xlink:href="#box" transform="translate(-50,-50) scale(2)" />
<use xlink:href="#box" transform="translate(-100,-100) scale(3)" />

<!--Show effects of skewX and skewY -->
<!-- Establish a new coordinate system whose origin is at (30,30) in the initial coordinate system and which is skewed in X by 30 degrees. -->

<g transform="translate(10,250)">
<g transform="skewX(30)">
<g style="fill:none; stroke:red; stroke-width:3">
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" style="font-size:18; font-family:Verdana; fill:purple"> ABC (skewX) </text>
</g>
</g>

<!-- Establish a new coordinate system whose origin is at (200,30) in the initial coordinate system and which is skewed in Y by 30 degrees. -->

<g transform="translate(140,250)">
<g transform="skewY(30)">
<g style="fill:none; stroke:red; stroke-width:3">
<line x1="0" y1="0" x2="50" y2="0" />
<line x1="0" y1="0" x2="0" y2="50" />
</g>
<text x="0" y="0" style="font-size:18; font-family:Verdana; fill:brown"> ABC (skewY) </text>
</g>
</g>

</svg>