javascript - SVG rotate transform Matrix - Stack Overflow

admin管理员组

文章数量:1345447

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?

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?

• javascript
• matrix
• svg

Share Improve this question Follow asked Mar 14, 2012 at 12:15 zeacusszeacuss 2,63322 gold badges2929 silver badges3232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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 puted. 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

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.

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

本文标签： javascriptSVG rotate transform MatrixStack Overflow