title: Change in mouse position when viewbox is added
body: <p>I am currently learning and working in JavaScript and SVG and I am new to it.
  Here is my scenario</p>
  
  <p>I have a div which has an SVG inside it.</p>
  
  <pre><code>&lt;div id "O_div"&gt;
    &lt;svg&gt;
       &lt;line x1= "0" x2 = "0" y1 ="0" y2 ="0"&gt;
       &lt;/line&gt;
    &lt;svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to know the mouse position relative to my div so I wrote following code</p>
  
  <pre><code>odiv = document.querySelector('#O_div');
  
  XOffset = $(Odiv).position().left;
  YOffset = $(Odiv).position().top;
  
     // And on my mouse move event 
              $('#O_div').mousemove(function(event) {
                  var mouseX = event.clientX - XOffset;
                  var mouseY = event.clientY - YOffset;
                 // Here I am setting my line x and y coordinate equal mouseX and mouseY
                 //So that line moves according to mouse move movement.           
              });
  </code></pre>
  
  <p>It is working fine.
  But the problem arises when I add a resize functionality to my div using query resizable.To resize my svg I added a viewBox option in it.Now my svg looks like this</p>
  
  <pre><code>&lt;svg viewBox="0 0 450 154" preserveAspectRatio="xMinYMin meet"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>But now my mouse coordinate are not working fine and my line is a bit further from my mouse and it goes more far from my mouse when I increase the div size.
  Can any one kindly guide me how do I have to calculate my offset positions When I have a viewbox option in my svg.</p>
  
  <p>Thanks any help and guidance will be appreciated. </p>