[SOLVED] Cannot zoom in a certain point in scaled coords in SVG with panzoom

Cannot zoom in a certain point in scaled coords in SVG with panzoom

I'm using the https://github.com/ariutta/svg-pan-zoom library

I have a svg with an element "g" inside. This element has a viewBox = "2727 -2840 1630 1115"

I want to zoom in a specific point (which is inside the viewbox)

panzoom.zoomAtPoint(2, {x: 3000, y: -2500});

However it doesn't work. The svg got moved outside the viewbox apparently. It looks that the panzoom take as initial x,y = 0,0 and its viewbox is 0 0 900 787

Solution

zoomAtPoint is zooming into the rendered SVG point. For example if your original SVG viewport was 1000 by 1000, but the SVG element on page is of size 400 x 400 (and fit option is enabled) then:

Zooming to {x: 200, y: 200} will zoom to the center
Zooming to {x: 500, y: 500} will zoom outside of the SVG (as it currently has only 400 x 400)

This was done so that handling zooming by mouse is easy. If you need to zoom in a specific point then take a look at https://stackoverflow.com/a/33682381/1194327 and at https://github.com/ariutta/svg-pan-zoom/issues/183