Menu
Is there a way to flip the SVG coordinate system so that [0,0] is in the lower left instead of the upper left?
758
To mirror an SVG, upload your vector or drag n drop it to the editor. Next, click on the flip tool located at the top toolbar of the editor. Once activated, mirror the SVG file by flipping it horizontally or vertically.
For all elements, SVG uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other computer drawing routines). That is, the top left corner of the document is considered to be the point (0,0), or point of origin.
An SVG element can also be skewed. To skew it, you can use one or both of the two skew transformation functions: skewX and skewY . The skewX function specifies a skew transformation along the x-axis; and the skewY function specifies a skew transformation along the y-axis.
Use this CSS to flip an SVG horizontally: -webkit-transform: scaleX(-1); transform: scaleX(-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.
91
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).
26
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/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
