Geometry - Translation (Addition)

Card Puncher Data Processing


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>


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


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


  • The CSS
rect {
  • The Svg
<!-- N -->
<rect transform="matrix(1 0 0 1 20 20)" />
  • The output:

Documentation / Reference

Discover More
Card Puncher Data Processing
Geometry - Origin

All geometrics objects definition goes through the origin. In order to go through an another point, a translation (addition) must be performed.
Card Puncher Data Processing
Geometry - Shape (with transformation and notion)

in Geometry A shape is any list of line drawing commands, which strung together, describe a continuous line or closed shape that can be filled or stroked. Move, Line, Quadratic and Cubic...
Card Puncher Data Processing
Geometry - Transformation

Transformation of geometric objects. A geometric transformation is represented by a transformation matrix. Transformations that keep the origin fixed are linear including: , ...
Matrix Rotation 90
Geometry - Transformation Matrix

A geometric transformation can be represented by a matrix. THE advantage of using transformation matrices is that cumulative transformations can be described by simply multiplying the matrices that describe...
Inkscape Layout
Inkscape - Move Object

in Inkscape Move tab of the Transform dialog (Object → Transform... (Shift+Ctrl+M)). With a bounding box, dragging on anon-transparent part will move the whole. Holding the Ctrl key...
Complex Plane
Python - Complex Numbers

complex numbers in Python Python uses 'j' for the imaginary unit, not 'i'. Type Complex Addition The real and imaginary parts of a complex number can be interpreted as x and y coordinates...
Card Puncher Data Processing
SVG - Translate transformation

The Translate transform definition specifies a translation by x and y. If Y is not provided, it is assumed to be zero. This is equivalent to matrix(1 0 0 1 X Y). Ie See NI letters made of...

Share this page:
Follow us:
Task Runner