flip svg coordinate system

Question

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

Answer 1

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

which also equivalent to below

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

Answer 2

I think the simpliest way to rotate element for 180 deg is that you rotate for 180.1 deg;

transform="translate(180.1,0,0)"

Answer 3

If you don't know the size of the svg than you can use CSS transformations for the whole SVG element:

#parrot {
    transform-origin: 50% 50%; /* center of rotation is set to the center of the element */
    transform: scale(1,-1);
}

Credits: https://sarasoueidan.com/blog/svg-transformations/#transforming-svgs-with-css

Answer 4

I know this is old, but I was doing the same thing, tried @Nippysaurus version but this is too annoying since everything will be rotated (so if you put images, you'll have to rotate them back). There's another solution though

What I did was simply move the viewBox of the svg and invert all coordinates on the y axis (and removing the height of the object to be at the bottom left corner on it too), like:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="300" viewBox="0 -300 200 300">
  <rect x="20" y="-40" width="20" height="20" stroke="black" stroke-width="1px"></rect>
</svg>

this will put a rect at 20,20 from the bottom left corner of the svg, see http://jsfiddle.net/DUVGz/

Answer 5

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.

Answer 6

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.