Question

I am using the Raphael library from http://raphaeljs.com/ and work on a chart library. For this library it is useful when the Y-axis are inverted. Now 0,0 is at the top left but I want it to be at the bottom left.

There is a possibility to apply a scale matrix to an element but I want the coordinates to be inverted for whatever I draw. Any clues?

Answer 1

The only way I could figure out to do this was to apply a negative scaling to the svg element using CSS (see this fiddle). (I used jQuery to add the styles).

This is not without problems, though. For example, text is going to be mirrored, unless you do something to un-mirror it (like applying the invert() method I added to elements using Raphael.el):

Raphael.el.invert = function() {
    this.transform('s1,-1');
};

Also, if you are going to be interacting with the elements using your mouse, you will have to tweak things. Note that the black circle uses a pretty standard mouseMove function, but it doesn’t work – it moves in the wrong direction in y. So you have to do something like I did with the other circles:

function cMove(dx, dy, x,y) {
    this.attr('cx', x);
    this.attr('cy', paperHeight - y);
};

In short, this is not at all elegant, and no other things I tried were really any better. I know this isn’t what you want to hear, but I would recommend getting used to the coordinate system as it is, unless you just plan on displaying static charts.