views:

155

answers:

0

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.