SVG pain. inverted y axes; text default scale is absolute
inverted y axes
the y coordinate is inverted from normal
Solution, attach all your drawing to a group, then apply transformation, like this:
gp.setAttribute("transform", xd.translate(0, 2*ymin+ywidth) + xd.scale(1,-1) );
but, the problem is, if you have text, the entire font gets inverted upside down too.
So this means, there isn't simple solution to work with “not invert” y axes. Maybe there's a attribute to make text not invert or something. Still don't have a nice solution.
the inverted y axes is a major pain, because it drains brain when you work with “normal” y-axes, such as in math plots. Either twist your brain, or, you need to remember to attach a transform to every of your drawing primitive. Or, group them and transform.
text default scale is absolute
you can use svg viewBox to specify your drawing's coordinate range. that is, xmin, xmax, ymin, ymax
this makes it convenient. For example, if your app is plotting basic math functions, you can work with coordinate x from -10 to 10, y from -10 to 10. Instead of pixels and whatever is the current width and heigh of view port
but, if you add text in your drawing, such as axies labels, the text default to font size 16px. So, you have to manually figure out what's the scaling from your view box to view port, and rescale all your text elements.