Transformation

Meaning

Parameters

translate

Define a translation of the coordinates

x and y defining the x and y translation
If y is not provided, it is assumed to be zero.

transform = "translate(x [y])"

Explanation

The new user coordinate system has its origin at location (100,100) in the original coordinate system.

The result of this transformation is that the coordinate (50,50) of the top-left point of the rectangle in the new user coordinate system gets mapped to coordinate (150,150) in the original coordinate system (i.e., the coordinates have been translated by 100 units in X and 100 units in Y).

Code Example

SVG Image

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

<!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">

<!-- Draw the axes of the original coordinate system & the text -->
<g fill="none" stroke="blue" stroke-width="3" >
<line x1="0" y1="1.5" x2="150" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="150" />
</g>

<g>
<text x="15" y="15" font-size="15" font-family="Verdana" >ABC (orig coord system) </text>
</g>

<!-- Establish a new coordinate system, which is shifted (i.e., translated) from the initial coordinate system by 30 user units along each axis. -->

<g transform="translate(30,30)">
<g fill="none" stroke="red" stroke-width="3" >

<!-- Draw the axes of the new coordinate system & the text -->

<line x1="0" y1="0" x2="30" y2="0" stroke="red" />
<line x1="0" y1="0" x2="0" y2="30" />
</g>

<text x="15" y="15" font-size="15" font-family="Verdana" > ABC (translated coord system) </text>
</g>

</svg>