SVG - Translate transformation
About
The Translate transform definition specifies a translation by x and y.
Articles Related
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>
Example
NI letters made of rect
- The CSS
rect {
height:20px;
width:20px;
fill:#ECDCC6;
}
- The Svg
<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>
- The output: