Geometry - Translation (Addition)

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:

Documentation / Reference

• wiki/Translation_(geometry)