flip svg coordinate system

问题

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

回答1:

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.

回答2:

The best all around combo I've found for transforming 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 auto-unflip all the text elements on the page via the css scaleY(-1).

回答3:

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/

回答4:

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.

回答5:

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

which also equivalent to below

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

回答6:

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

回答7:

An alternative is to use D3 v4 scaleLinear to create a function that will do the swapping 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 runable code via tonic

回答8:

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)"

来源：https://stackoverflow.com/questions/3846015/flip-svg-coordinate-system

标签

svg

coordinate-systems

cartesian