flip svg coordinate system
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.
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).