Join the social network of Tech Nerds, increase skill rank, get work, manage projects...

• # SVG Matrix transformation

• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 0
• 157
Comment on it

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"
<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)

OR
OR
Register

OR
Fill out the form below and instructions to reset your password will be emailed to you:

• Hire
• Post Projects

### Post Projects

• All at 0 Cost ....
• Post Tech Job
• Select Best Bidder
• Track the Project
• Approve Work and Pay safely
• Browse Nerds
• Work
• Find Projects Find Projects
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General
View more...
View less...
• Manage
• Company Company

### Manage Company

• All at 0 Cost ....
• Manage Company and Employee Profiles
• Company wide Employee Productivity Reports
• Knowledge Sharing and Collaboration Tools
• Get Sales Lead and Bid for Tech Projects
• Send Invoices and Receive Payment Safely
• Learn
• Nerd Digest Nerd Digest
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General
View more...
View less...
• Tech Q & A Tech Q & A
• UI Design and UX
• Software Engineering
View more...
View less...
• Marketing
• General
View more...
View less...