Best IT Recipes

Flip svg coordinate system

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

+56
svg coordinate-systems cartesian
02 Oct. '10 at 13:50
source share
8 answers

I have done many experiments, 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 is, it moves everything down so that the top of the image and the bottom of the image, then the zoom operation flips the Y coordinates, so that the bit that is now outside the page / image goes back to fill in the remaining space.

+72
03 Oct '10 at 9:04 on
source share

The best combination I found to convert to a Cartesian coordinate system is pretty simple:

CSS

 svg.cartesian { display:flex; } /* Flip the vertical axis in <g> to emulate cartesian. */ svg.cartesian > g { transform: scaleY(-1); } /* Re-flip all <text> element descendants to their original side up. */ svg.cartesian > g text { transform: scaleY(-1); } 
 <html> <head></head> <body> <svg class="cartesian" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"> <g> <!-- SVG Start --> <!-- Vertical / Horizontal Axis: Can be removed if you don't want x/y axes. --> <path d="M0 -100 V 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" /> <path d="M-100 0 H 200" stroke="green" stroke-width="0.5" stroke-opacity="0.5" /> <!-- Plotting: This is an example plotting two points at (20, 20) and (-50, -35), replace it with your data. --> <g transform="translate(20, 20)"> <circle r="1" /> <text>(20, 20)</text> </g> <g transform="translate(-50, -35)"> <circle r="0.5" /> <text>(-50, -35)</text> </g> <!-- SVG End --> </g> </svg> </body> </html>

This will automatically open all text elements on the page with css scaleY(-1) .

+11
Aug 07 '16 at 6:20
source share

I know this is old, but I did the same, tried the @Nippysaurus version, but it is too annoying as everything will be rotated (so if you place the images, you will have to rotate them). There's a different solution though

I made just moving the viewBox from svg and inverting all the coordinates on the y axis (and removing the height of the object in the lower left corner too), for example:

 <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 lower left corner of svg , see http://jsfiddle.net/DUVGz/

+10
Sep 20 '13 at 15:52
source share

Yes, this should lead to a rotation of -90 coordinates, followed by the translation + height of your new figure. Example: W3C .

+4
Oct 02 2018-10-10
source share
 <g transform="translate(0,400) scale(1,-1)">

which is also equivalent to below

 <g transform="scale(1,-1) translate(0,-400) ">
+3
Jun 20 '17 at 2:23 on
source share

If you do not know the size of 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

+2
Aug 07 '16 at 11:27
source share

An alternative is to use the D3 v4 scaleLinear to create a function that will perform the exchange for you.

 import * as d3 from "d3"; ... // Set the height to the actual value to where you want to shift the coords. // Most likely based on the size of the element it is contained within let height = 1; let y = d3.scaleLinear() .domain([0,1]) .range([height,0]); console.log("0 = " + y(0)); // = 1 console.log("0.5 = " + y(0.5)); // = 0.5 console.log("1 = " + y(1)); // = 0 console.log("100 = " + y(100)); // = -99 console.log("-100 = " + y(-100)); // = 101

See the executable code through the tonic

-one
Aug 10 '16 at 5:10
source share

I think the easiest way to rotate an element 180 degrees is that you rotate 180.1 degrees;

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

-5
Nov 24 '14 at 2:05
source share


More articles:


All Articles