# Geometry - Translation (Addition)

### Table of Contents

## About

A translation is a special type of transformation matrix.

## Articles Related

## Matrix multiplication

See Geometry - Transformation Matrix.

The functional form <MATH> x' = x + t_x \\ y' = y + t_y </MATH> becomes: <MATH> \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} </MATH>

## 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: