flip svg coordinate system

svg coordinate-systems cartesian
Nippysaurus picture Nippysaurus · Oct 2, 2010 · Viewed 43.9k times · Source

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

Nippysaurus picture Nippysaurus · Oct 3, 2010

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.

Related questions

How to change the color of an svg element?

I want to use this technique http://css-tricks.com/svg-fallbacks/ and change the svg color but so far I haven't been able to do so. I put this in the css but my image is always black, no matter what. …

Read More
How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are …

Read More
Do I use <img>, <object>, or <embed> for SVG files?

Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png? What is the code for each to ensure it …

Read More