CODEWITHSUNDEEP
javascriptmatrixsvg
zeacuss
zeacuss

Reputation: 2623

SVG rotate transform Matrix

I parsed a transform attribute from an element in an SVG file something like rotate(45,30,50) and I would like to transform it to matrix form. I searched for it and all I could found is only for rotate(a) with no coordinates which looks like this [cos(a) sin(a) -sin(a) cos(a) 0 0]

can any one show me how to transform the rotate(angle, x , y) to matrix form?

Upvotes: 3

Views: 8671

Answers (3)

Scarecrow
Scarecrow

Reputation: 4137

To get svg transform matrix from a rotation with pivot point,

check this question answer

how to calculate svg transform matrix from rotation with pivot point

Upvotes: 0

zeacuss
zeacuss

Reputation: 2623

I found an easier way to get the transformation matrix of an SVG element. Using the SVG element getCTM() method I can get the transformation matrix of the element, including rotation, translation and everything else.

Upvotes: 1

Raffaele
Raffaele

Reputation: 20875

Rotation matrices can only describe rotations about (0, 0), so you'll have to use a translation.

EDIT See this JSFiddle. It draws a rectangle defined with an offset, width and height, rotated around a pivot point. The interesting part are the last 10 lines or so, where the value for offsetX and offsetY are computed. Once you have these, you can build your translation and your rotation matrices. Then, just multiply the translation by the rotation, and you'll get your final result. Unfortunately, Javascript doesn't offer any matrix functionality, so if you don't provide your code this is all I can do

HOW A TRANSLATION MATRIX IS MADE

1   0   offsetX
0   1   offsetY
0   0      1

HOW A ROTATION MATRIX IS MADE

cos   -sin    0
sin    cos    0
 0      0     1

preview

Upvotes: 8

Related Questions