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.

〔➤ SVG Coordinates, Viewport, viewBox

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs