Vertically inverting Raphael SVG shape not working

Question

I have created a fiddle of a bar chart, which is a part of a series of charts I'm creating using Raphael SVG. The other charts are vertically inverting perfectly using scale(1,-1). However, if you apply scale on this fiddle as given here:

      SVGpaper.rect((-50 / 2), 0, 50, barHeight).attr({
        transform: "t" + t1 + "," + t2 + "s1,-1",
        "stroke-width": 1
    });

and inspect the bars, the scale is working but the transform for the y-axis is changing and thus not creating any change in the SVG itself.

What is the problem here?

Answer 1

I think with Raph each rect is scaling around its own centre of origin, so in effect there is no visible difference. Whereas you want to scale around a specific centre. So if you use a specific centre of origin for them all like..

Swap

transform: "t" + t1 + "," + t2 + "s1,-1"

for

transform: "t" + t1 + "," + t2 + "s1,-1,0,0" 

I think it will do what you are after, eg http://jsfiddle.net/Qru24/14/