I'm trying to figure out how translate() and scale() work together.
I've got a path element with all sorts of coordinates (some are minus, most are positive) and it displays fine. There are no problems with the SVG as it is.
However, I want to center the element inside the SVG. The path is inside a G element so I'm applying scale() and transform() to the G element. Now I can do this by fiddling around for hours until it looks about right, but I'd rather know precisely how to do it correctly first time. (This is because I'm writing a program to automate the process, and if I don't know how SVG works I can't write the program!)
The SVG has a set width of 300 pixels. So I thought, get the leftmost and rightmost coordinates in the path, calculate total width, divide that so that it fits within 300 pixels (this value goes into the scale() parameter), then half it to get the necessary x parameter for the transform() call. However, it just isn't working. I don't even get the scaling right - the result is about 85 times larger than it should be!
Now I admit maths isn't my strong point, so can anyone help me out by explaining how to do this?
Are the coordinates in a path element treated as pixel values? If not, how do I convert whatever form it is in to pixels?
Thanks very much for reading,
Seymour.