1

I have searched a lot in forums and of course here, but I have not found a definitive solution. I have found similar issues, but it doesn't works.

When I draw a rect, Inkscape gives me the exact x and y position from it. But, when I rotate, it changes the x and y positions to incomprehensible values. For example:

<rect
   id="rect2985"
   width="100"
   height="100"
   x="100"
   y="100" />

It's OK, but when rotated, take a look at "transform" attribute and at x,y:

<rect
   id="rect2985"
   width="100"
   height="100"
   x="4.9038105"
   y="154.90381"
   transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" />

How can I calculate to get x=100 y=100 from x=4.9... and y=154.9... or from the matrix values?

Community
  • 1
  • 1
Francis
  • 33
  • 11

1 Answers1

1

If you want to keep the x=100 y=100 values you would have to calculate a different transformation matrix. A rotation over the center of the square is equivalent to 3 transformations: 

 translate(-(x + centerX), -(y + centerY))
 rotate(angle)
 translate(x + centerX, y + centerY)

In your case the transform attribute would be something like: 

 transform = "translate(150, 150) rotate(45) translate(-150, -150)"

I'm not sure if you're interested in the math, or just want the transformation matrix. If you just want the final matrix values , you can look at this fiddle: http://jsfiddle.net/mihaifm/PQvBj/

I used getCTM to get the matrix a,b,c,d,e,f values.

Final result (assuming a rotation of 45 degrees):

<rect
   id="rect4"
   width="100"
   height="100"
   x="100"
   y="100"
   transform="matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, 150, -62.132034355964265)" />
mihai
  • 37,072
  • 9
  • 60
  • 86