I am using the Raphael library from / 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?

I am using the Raphael library from http://raphaeljs./ 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?

• javascript
• svg
• raphael

Share Improve this question Follow asked Dec 11, 2011 at 19:22 Bas van DijkBas van Dijk 10.7k1010 gold badges5959 silver badges9595 bronze badges 2

• Similar to stackoverflow./questions/4403345/…. – Erik Dahlström Commented Dec 12, 2011 at 14:01
• This is not exactly the same I guess, since the scaling applies to the object and not to the canvas. – Bas van Dijk Commented Dec 12, 2011 at 16:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 remend getting used to the coordinate system as it is, unless you just plan on displaying static charts.

One small issue with Mike C's resolution is that you have to know if the text is going to be inverted in the end when you create the text. If you want to ensure right-side-up text at the end (after applying other transformations) I found it works well to alter the text element's .transform() to flip the scale of text to right side up at the end.

function InvertText(ObjSet){
// This function resets the inversion of text such that it is always right side up
// ObjSet is a raphael paper.set() object

for (var i=0; i<ObjSet.items.length; i++){
    var ThisObj = ObjSet.items[i];
    if (ThisObj.type == 'text'){
        var tArr = ThisObj.transform();

        // Find the scaling factor
        for (var j=0; j<tArr.length; j++){
            if (tArr[j][0] == 's'){
                tArr[0][2] = 1;
                break;
            }
        }
        ThisObj.transform(tArr);
    }
}
}

You can use like this:

var ObjSet = paper.set().push(
        paper.text(0,10,'FirstText'),
        paper.path('M,0,0,v,100,h,20,v,-100,h,-20'),
        paper.circle(0,0,5)
        );

//Flip everything on the y-axis
ObjSet.transform('s,1,-1, T,100,100');

// Make the text right-side-up
InvertText(ObjSet);

Here's how to do it just with RaphaelJS transforms, no CSS transforms.

var SCALE = 2;

var paper = Raphael(0, 0, 400, 700);

// box notched at bottom-center and right-center
var p = paper.path("M0,0 L100,0 L100,40 L90,50 L100,60 L100,100 L60,100 L50,90 L40,100 L0,100 Z");

var bounds = p.getBBox();

p.attr({
  stroke: 'none',
  fill: [90, '#578A6E', '#34573E'].join("-")
})
.transform("t"+ (-bounds.width/2) +","+ (-bounds.height/2) +
       "s"+ SCALE +","+ (-SCALE) +
       "t"+ (bounds.width/2) +","+ (-bounds.height/2));

Raphael applies scale transforms from the center of the element's bounding box, rather than its origin. To invert the y-axis, offset before scaling, then offset again after.