I have a Raphaël text object that I would like to rotate around an axis some distance away and also rotate the text accordingly so it stays horizontal. I know this is possible using SVG transformation matrices, but the author of Raphaël has stated that they won't be a part of the toolkit anytime soon. Here's some code of what I'd like to do:
txt_obj = paper.text(100, 100, "Hello!");
txt_obj.rotate(90, 100, 200); // rotate text so it is sideways at (200,200)
txt_obj.rotate(-90); // rotate text back to horizontal
Unfortunately, the second rotate command obliterates the translation and rotation accomplished by the first.
If I were doing straight SVG I could do something like this:
<g transform="rotate(90, 100, 200)">
<text x="100" y="100" transform="rotate(-90, 100, 100)">Hello!</text>
</g>
However, I don't believe that Raphaël supports the svg g
element.
Ideally I'd like to animate the operation, but I'll take it one step at a time for right now.