The SVG stands for "scalable vector Graphic" and below are the example for SVG matrix.
The matrix looks like this:
a c e
b d f
0 0 1
There is only first 6 values can be specified, you only provide 6 values to the matrix transformation function. Here is an example:
transform="matrix(a,b,c,d,e,f)"
The other transformation functions can be expressed as matrices. Here are some examples:
Translate
1 0 tx
0 1 ty
0 0 1
matrix(1,0,0,1,tx,ty)
Rotate
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
Note: the values for cos(a) and sin(a) have to be precomputed before being inserted into the matrix. The parameter a is the angle to rotate.
Scale
sx 0 0
0 sy 0
0 0 1
matrix(sx,0,0,sy,0,0)
A skew transformation along the x-axis can be written as:
Skew
1 tan(a) 0
0 1 0
0 0 1
matrix(1,0,tan(a),1,0,0)
The tan(a) value has to be precomputed before being inserted into the matrix() function.
A skew transformation along the y-axis can be written as:
Skew
1 0 0
tan(a) 1 0
0 0 1
matrix(1,tan(a),0,1,0,0)
Here is the output:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="20" width="50" height="50"
style="fill: #cc3333"/>
<rect x="20" y="20" width="50" height="50"
style="fill: #3333cc"
transform="matrix(1,0,0,1,100,20)"
/>
</svg>
0 Comment(s)