Hello,

I need to parse SVG (just the simples things) and only thing left to do is to properly extract position and angle from the matrix transformation. I know this question has been asked many times and I believe I have went through many of the answers, documents etc. but still cannot handle it proporly. Here's the simplest example I managed to prepare:

I have created 1000x1000 document (all numbers in px) and put a rectangle of 100x100 size at 100,100 position. It has generated the following piece of SVG file (I have removed style attrib. and parent tags). There's no other transformation anywhere in the file:


Then I have rotated the rectangle by 33deg (with the 'transform' inkscape tool). The SVG code looks this:



Now, my goal is to extract the position and angle from the matrix, so basically I'd like to get back the following values: x:100,y:100,angle:33. In order to do it, I have assumed the following formulas:

sx=sqrt(a^2+b^2)
sy=sqrt(c^2+d^2)

t=atan(c/d) OR t=atan(-b/a)
t=acos(a) if MATRIX is PURE

x' = tx + sx*(COS(t)*x-SIN(t)*y)
y' = ty + sy*(SIN(t)*x+COS(t)*y)

the result is:
t = 0.575958787 (which is 33deg) - PERFECTLY FINE

however
x'=-90.72230563 and y'=128.8770646
and this is exactly what totally confuses me - why it's not 100,100 ?

Please help, I have went through tons of forums, SVG W3C documentation and still cannot make it right.

Thank you,
Veedoo

Hi,

I might be able to answer your question but I am not sure if I understand the question right. You have a 100 by 100 rectangle with its lower left corner at 100, 100? Then you rotated this entire rectangle by 33 degrees? Now what is the second SVG code representing? I am not familiar with that part of your question. When you say

<rect
width="100"
height="100"
x="-5.8952699"
y="157.49644"
transform="matrix(0.83867057,-0.54463904,0.54463904,0.83867057,0,0)" />

What is the x and y here supposed to be? Are they the new locations of the corner after rotation? If so, that seems impossible if the original point was at 100, 100 because only after a rotation of 45 degrees, this point would cross the y axis to go on the negative x side. So, I am not sure if I clearly understand the question. If you can explain that a little, I might be able to then further answer your question.

Thanks

(By chance did you read some of my previous replies? I assume you did seeing as you seem to be nearly there !)
The Key thing to note is that the transform object transforms the whole co-ordinate system, not just the object. There is a very subtle difference.

The thing to note is that the matrix transformation is basically done around the documents origin, and then the x,y values are there to move the object back into the correct position:


e.g. Think of a SVG document as a pin board / cork board. You add rulers on the chalk board, and these would be your document co-ordinate system.
Now add a piece of paper with a small drawing in the bottom left corner. Draw rulers along the side of the paper. Pin it in the top left corner so the papers rulers match those of the cork boards rulers. This is your "user / objects coordinate system". The transformation is performed on that whole piece of paper, not just your drawing in the bottom corner. Say a rotation of (-)90 degrees. You would rotate the paper around the pin in the top left corner. But this means that your drawing is no where near where it was before you started rotating it. To compensate it, you change the x and y coordinates of the drawing you made - but you use the rulers attached to the paper, not the cork board.

Hope that helps! Sorry if it does not work how you (or to be honest most people, including me) think it should work!



>Old reply
The basic problem you are running into is that the rectangle is defined from the corner and not the centre(Spec) When you rotate it using Inkscape, it defaults to rotating it around the objects center, not its origin (and then Inkscape automatically updates the origins coordinates to match.

If you try with a rotation of 90 degrees (perhaps add a gradient fill to show you which corner is the origin) this will become clearer.



To really see what is going on, add the Inkscape custom attributes inkscape:transform-center-x="-50" ... y="50

Like so: