0

I am reading SVG Essentials, at chapter 6, it talk about the rotate transform. It says

rotate(angle, centerX, centerY) is equal to translate(centerX, centerY) rotate(angle) translate(-centerX, -centerY)

But What I learn before to calc this problem is first make point A(x,y) to A(x - centerX, y - centerY), then rotate, then add centerX, centerY back.

Like this answer says.

I try to review some linear algebra knowledge but still can't figure what's the different.

Can any one tell me the why this happen?

Kindly guide me why svg add-rotate-sub and normal is sub-rotate-add?

Thank you in advance.

Usman Khan
  • 3,739
  • 6
  • 41
  • 89
Cabage
  • 337
  • 2
  • 11

1 Answers1

1

Your reasoning is correct. In SVG specification, the order of transformations is applied from right to left, so it matches your intuition:

1) translate(-centerX, -centerY)
2) rotate(angle) 
3) translate(centerX, centerY)

See this answer for more details.

Gilles-Philippe Paillé
  • 3,195
  • 1
  • 8
  • 21