Table of Contents

SVG - Translate transformation

About

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

Syntax

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

Example

NI letters made of rect 

rect {
   height:20px;
   width:20px;
   fill:#ECDCC6;
}

<svg>
<!-- N -->
<rect/>
<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)" />
</svg>
Rendered by WebCode

Documentation / Reference