Cursor location after scaling with svg-pan-zoom

Question

I am using the ariutta svg-pan-zoom library. I have an SVG file with viewBox="0 0 1052.3622 744.09448" and div with width=649and heigth=525,59. I am trying to get the cursor location inside SVG.

My code is:

var divX = ev.pageX - this.offsetLeft;
var divY = ev.pageY - this.offsetTop;

var currentPan = panZoom.getPan();
var realZoom = panZoom.getSizes().realZoom;
var panZoomHeight = panZoom.getSizes().height;
var viewboxHeight = panZoom.getSizes().viewBox.height;

var x = (divX - currentPan.x) / realZoom;
var y = ((panZoomHeight - divY - ((panZoomHeight-(viewboxHeight*realZoom))/2) + currentPan.y) / realZoom);

var zoom = panZoom.getZoom(); // only to explain my problem - I'm not using this value 

It works fine until zoomit becomes 1 (default zoom level). When the scale is greater than 1, the value yis incorrect ( xis good). For instance:

• I click at some point and the result x: 197.82463543913713, y: 616.3652582594272
• scaling with the mouse wheel ( zoom: 3.9562617313728334, the cursor is still at the same point on the screen).
• click again and the result x: 197.82463192575807, y: 540.7407139122004

I tried a lot of code combinations, but nothing works. I do not know how to do that. Am I missing something? Is there a better solution for getting the cursor position?

Answer 1

! . , y zoom == 1 - .

:

var y = (panZoomHeight - divY - (panZoomHeight-(viewboxHeight*realZoom)) + currentPan.y) / realZoom;