# SVG - Translate transformation

The Translate transform definition specifies a translation by x and y.

## Syntax

translate(<X> [<Y>])


If Y is not provided, it is assumed to be zero.

This is equivalent to matrix(1 0 0 1 X Y). Ie

$$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & X \\ 0 & 1 & Y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$$

## Example

• The CSS
rect {
height:20px;
width:20px;
fill:#ECDCC6;
}

• The Svg
<svg>
<!-- N -->
<rect/>
<rect transform="translate(0,20)" />
<rect transform="translate(0,40)" />
<rect transform="translate(0,60)" />
<rect transform="translate(0,80)" />
<rect transform="translate(20,20)" />
<rect transform="translate(40,40)"/>
<rect transform="translate(60,60)"/>
<rect transform="translate(80,80)"/>
<rect transform="translate(80,60)" />
<rect transform="translate(80,40)" />
<rect transform="translate(80,20)" />
<rect transform="translate(80,0)" />

<!-- I -->
<rect transform="translate(120,0)" />
<rect transform="translate(120,20)" />
<rect transform="translate(120,40)" />
<rect transform="translate(120,60)" />
<rect transform="translate(120,80)" />
</svg>

• The output:

## Documentation / Reference

Discover More
Geometry - Skewing (Shearing)

Shear is a transform that rotates one axis so that the axes are no longer perpendicular. It means offsetting the coordinates along one or two axes based on the distance along the remaining axis. Under...