Question

This may or may not be a very trivial question, but then again, I’m completely new to this JavaScript library (i.e. only started reading about it today).
Exactly how do I proceed to rotating a simple image (png/jpeg etc) on my server using Raphaël? Does it need to first be converted to SVG beforehand?
In other words, I would need to replicate this demo on http://raphaeljs.com

Answer 1

You would put your image on the canvas and apply a rotate transform to it. Here’s an example:

var paper = Raphael("thepaper", 300, 300);
var theImage = paper.image("https://i.stack.imgur.com/Zg08b.png", 0, 0, 128, 128);
theImage.transform("R45");

You can see a working demo of that here.

You can animate that pretty easily by applying an animation. Change the last line to this:

theImage.animate({"transform": "R45"}, 10000);

You can see that working here, and that will rotate it 45 degrees over 10 seconds.