How do I apply multiple rotation transforms on a Raphael text object?

Posted by Pridkett on Stack Overflow See other posts from Stack Overflow or by Pridkett
Published on 2010-06-18T03:58:39Z Indexed on 2010/06/18 4:03 UTC
Read the original article Hit count: 667

Filed under:

JavaScript

|

svg

|

rotation

|

raphael

I have a Raphael 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 Raphael 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, 0, "Hello!");
txt_obj.rotate(90, 100, 100); // rotate text so it is sideways at (200,100)
txt_obj.rotate(-90); // rotate text back to horizontal

Unfortunately, the second rotate command obliterates the translation and rotation accomplished by the first.

Ideally I'd like to animate the operation, but I'll take it one step at a time for right now.

© Stack Overflow or respective owner

Related posts about JavaScript

CHAT ROOMs 7 by 6

as seen on Stack Overflow - Search for 'Stack Overflow'
I am looking for chatroom on one page with 7 loggedin users and 6+rows for say 42 users.these users will keep on adding wthnew users.Need urgent help.A PRETTY UNUSUAL Q FOR MOST OF U.What is MORE REQ new features: Usernames are unique to users currently chatting You can see a "currently chatting"… >>> More
Integrating JavaScript Unit Tests with Visual Studio

as seen on Stephen Walter - Search for 'Stephen Walter'
Modern ASP.NET web applications take full advantage of client-side JavaScript to provide better interactivity and responsiveness. If you are building an ASP.NET application in the right way, you quickly end up with lots and lots of JavaScript code. When writing server code, you should be writing… >>> More
Has Javascript developed beyond what it was originally designed to do?

as seen on Programmers - Search for 'Programmers'
I've been talking with a friend about the purpose of Javascript, when and how it should be used, etc. He quoted that: JavaScript was designed to add interactivity to HTML pages [...] JavaScript gives HTML designers a programming tool HTML authors are normally not programmers… >>> More
PHP, javascript, single quote problems with IE when passing variable from ajax post to javascript fu

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi! I have been trying to get this to work for a while, and I suspect there's an easy solution that I just can't find. My head feels like jelly and I would really appreciate any help. My main page.php makes a .post() to backend.php and fetches a list of cities which it echoes in the form of: <li… >>> More
Javascript in XSL that is loaded by Javascript

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there anyway to have javascript run when a XSL sheet has been applied to an XML file by Javascript? I am using a JQuery plugin to apply the sheet to the xml but the javascript that is located inside of the XSL file will not run. I put the Javascript at the bottom of the file and it still does… >>> More

Related posts about svg

Firefox -- Dynamically embedding <svg> element in SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However… >>> More
manipulate objects outside svg with javascript-function inside the svg

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call… >>> More
javascript replace text with images problem

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card… >>> More
SVG Salamander example?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there. I'm toying with Java and SVG Salamander but cant quiet get how to render a simple SVG file into a Jpanel. Could someone give me a brief example? Tried to follow the loose tutorial in the official site, but could not find a simple code to get a better understanding. So, some code is really… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More