A translation is a special type of transformation matrix.

## Matrix multiplication

The functional form $$x' = x + t_x \\ y' = y + t_y$$ becomes: $$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & t \\ 0 & 1 & t \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$$

## Example

In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(1 0 0 1 X Y).

Below:

• we draw a rectangle without translation
• we draw a rectangle with translation

Example:

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

• The Svg
<svg>
<!-- N -->
<rect/>
<rect transform="matrix(1 0 0 1 20 20)" />
</svg>

• The output: