Unable to set pan and zoom without a visual gap

Question

Using svg-pan-zoom utility, I want to register the zoom and pan values every time is changes (using onPan() and onZoom()) and use these saved values to pan and zoom my SVG to the same position (using pan() and zoom()).

I works fine if the zoom level is not changed, however, if zoom level is changed, I have a gap between the wanted position of the svg and the real one.

You can see this problem in that fiddle: first, zoom in, then press the Pan button. I would like my svg to keep its current location.

I have read other posts on stackoverflow about similar situations (I guess I should use data from getSizes()) but I'm still unable to make it work.

Any advice?

Answer 1

OK, I got the solution, which is quite obvious. While zooming, I need to apply a zoom factor to the saved pan.

onZoom: function(zoom) {
  ratio = zoom/currentZoom;
  currentZoom = zoom;
  currentPan = {
    x: currentPan.x*ratio,
    y: currentPan.y*ratio
  }
}

See full code here