views:

29

answers:

3

Is there a way to flip the SVG coordinate system so that [0,0] is in the lower left instead of the upper left?

A: 

I think you have to read all this specification from W3C:

http://www.w3.org/TR/SVG/coords.html

Benoit
+2  A: 

Yes, a coordinate rotation of -90 followed by a translation of + the height of your new figure should do it. There is an example at W3C.

msw
I think what you had in mind is a rotate 180, followed by a translation of -w and -h. This does not work, [0,0] is still at the top left.
Nippysaurus
I suspect that your SVG implementation is non-conformant which isn't surprising for a (presumably) rarely used feature. An affine rotation of -90 moves the Cartesian quadrant IV (+x, -y) into quadrant I (+x, +y). A rotation of 180 degrees would put your reference frame into quadrant II with the origin in the lower left. The reason your self-answer works is that it is congruent to my original answer but likely uses better tested bits of your SVG interpreter of choice. Personally, I'd just calculate the affine transformation in my user-space code and be pessimistic about SVG capabilities.
msw
You are probably right. I am using Safari on OS X 10.6, so will test it on a Windows machine tomorrow.
Nippysaurus
A: 

I have done a lot of experimentation, and the only logical method is as follows:

<g transform="translate(0,400)">
<g transform="scale(1,-1)">

Where 400 is the height of the image. What this does it move everything down so that the top of the image is now and the bottom of the image, then the scale operation flips the Y coordinates, so that the bit that is now off the page/image is flipped back up to fill the space left behind.

Nippysaurus