Question

I have a problem maybe understanding well how coordinates work ins SVG. I have a javascript function that scales an svg graphic such as that:

var g = document.getElementById("graph");
var nm = g.getCTM().multiply(k); //k is the scale factor
g.setAttribute("transform", "matrix(" + nm.a + "," + nm.b + "," + nm.c + "," + nm.d + "," + nm.e + "," + nm.f + ")");

The point is that after scaling the center is slightly translated so the graphic loses is “geographic” center. How can I determine which translation I need to have to scale the graphic “around” its center?

Thanks.

Answer 1

Have you considered other approaches?

If you just looking for zoom in/out on an svg, it might be easier to do it differently, e.g.:
http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

I had the same problem a while ago and ended up creating my own zoom using this: https://github.com/rstacruz/jquery.transit

You basically use css transform scale for a svg wrapper and svg adjusts nicely. You can even animate the zooming.