title: Cursor location after zoom using svg-pan-zoom
body: <p>I am using the ariutta svg-pan-zoom library. I have a SVG file with <code>viewBox="0 0 1052.3622 744.09448"</code>
  and div container with <code>width=649</code> and <code>heigth=525,59</code>.
  I'm trying to get cursor location inside my SVG. </p>
  
  <p>My code:</p>
  
  <pre><code>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 
  </code></pre>
  
  <p>It works fine until <code>zoom</code> equals 1 (default zoom level). When zoom is greater than 1 the <code>y</code> value is wrong (<code>x</code> is good).
  For example:</p>
  
  <ol>
  <li>I click at some point and the result is <code>x: 197.82463543913713, y: 616.3652582594272</code></li>
  <li>zoom using mousewheel (<code>zoom: 3.9562617313728334</code>, cursor is still at the same point on the screen).</li>
  <li>click again and the result is <code>x: 197.82463192575807, y: 540.7407139122004</code></li>
  </ol>
  
  <p>I've been trying many combinations of code, but nothing works good. I have no idea how to do this. Am I missing something obvious?
  Is there any better solution to get cursor position?</p>