My goal is to rotate an svg-rect around a specific point without relying on transform-origin, but instead using chained translates and rotation.
After conducting some research, I discovered the following method:
- Translate the rotation point to the origin
- Rotate
- Undo the initial translation (Step 1) by translating it back
However, when I use:
transform="translate(-100, -50) rotate(30) translate(100, 50)"
It appears to be positioned incorrectly compared to:
transform="rotate(30, 100, 50)"
I have created a fiddle to demonstrate this: http://jsfiddle.net/VYmrX/. The blue rect represents the original position, the green one is for comparison, and the red one is transformed using the aforementioned method. My objective is to rotate it around its center at coordinates (100, 50).
Is there a way to achieve this without relying on transform-origin?