Table of Contents

About

A translation is a special type of transformation matrix.

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:
Rendered by WebCode

Documentation / Reference