SVG - Translate transformation

Card Puncher Data Processing

SVG - Translate transformation


The Translate transform definition specifies a translation by x and y.


translate(<X> [<Y>])

If Y is not provided, it is assumed to be zero.

This is equivalent to matrix(1 0 0 1 X Y). Ie

<MATH> \begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} 1 & 0 & X \\ 0 & 1 & Y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix} </MATH>

See SVG - Transform attribute


NI letters made of rect

  • The CSS
rect {
  • The Svg
<!-- N -->
<rect transform="translate(0,20)" />
<rect transform="translate(0,40)" />
<rect transform="translate(0,60)" />
<rect transform="translate(0,80)" />
<rect transform="translate(20,20)" />
<rect transform="translate(40,40)"/>
<rect transform="translate(60,60)"/>
<rect transform="translate(80,80)"/>
<rect transform="translate(80,60)" />
<rect transform="translate(80,40)" />
<rect transform="translate(80,20)" />
<rect transform="translate(80,0)" />

<!-- I -->
<rect transform="translate(120,0)" />
<rect transform="translate(120,20)" />
<rect transform="translate(120,40)" />
<rect transform="translate(120,60)" />
<rect transform="translate(120,80)" />
  • The output:

Documentation / Reference

Discover More
Card Puncher Data Processing
Geometry - Skewing (Shearing)

Shear is a transform that rotates one axis so that the axes are no longer perpendicular. It means offsetting the coordinates along one or two axes based on the distance along the remaining axis. Under...
Card Puncher Data Processing
Geometry - Translation (Addition)

A translation is a special type of transformation matrix. See . The functional form becomes: In Svg, the transform matrix is implemented with the matrix function. A translation would be matrix(1...
Card Puncher Data Processing
SVG - Transform attribute

The transformation matrix in SVG. The main function is the matrix function. The others one such as translate are just shortcut The main function is the matrix function matrix(a,b,c,d,e,f) ...
SVG - View Box

The Viewbox attribute specifies: a boundary box in which only the inside elements are visible. and how to resize / fit its content when the viewport is changing. SVG viewport The viewBox specify...

Share this page:
Follow us:
Task Runner