svg-pan-zoom wrong pan after zooming out

Question

It is a great library. It works well. Thank you Bumbu Alex and Anders Riutta and all the contributors. Well I got stuck. I have tried a lot. I guess the answer is nearby.

When I zoomIn by wheel or pinch (no matter) it zooms well in and out. When I reach zoom back by 1 it stays in place.

But when I

1. ZoomIn 2 times (for example)
2. Move my mouse cursor away (1 inch for example)
3. ZoomOut all the way and my elements are all off. So nothing centered anymore. It is applied a pan. Half elements are got cut off of the viewport.

So it is not a bad. I guess I use it wrong. I have tried thousand times to resize it back but nothing works for me. I appreciate any help. Thank you.

Answer 1

It is normal behaviour as zooming with a mouse zooms based on current mouse position. Same goes about zooming out.

If you want to achieve zooming in and out that is always the same then you'd have to:

• disable default mouse handing
• add your own listener for mouse scroll events
• when mouse scroll is fired - zoom in our out

(This demo) has some similar changes.

If you just want to centre the contents then you can use .center() or .contain() methods (you may also need to call .fit()).