Изменение положения мыши при добавлении окна просмотра

В настоящее время я изучаю и работаю с JavaScript и SVG, и я новичок в этом. Вот мой сценарий

У меня есть div, в котором есть SVG.

<div id "O_div">
  <svg>
     <line x1= "0" x2 = "0" y1 ="0" y2 ="0">
     </line>
  <svg>
</div>

Теперь я хочу знать положение мыши относительно моего div, поэтому я написал следующий код

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.           
            });

Он работает нормально. Но проблема возникает, когда я добавляю функцию изменения размера в свой div, используя запрос изменяемого размера. Чтобы изменить размер моего svg, я добавил в него параметр viewBox. Теперь мой svg выглядит так

<svg viewBox="0 0 450 154" preserveAspectRatio="xMinYMin meet">
</svg>

Но теперь мои координаты мыши не работают нормально, и моя линия немного дальше от моей мыши, и она уходит еще дальше от моей мыши, когда я увеличиваю размер div. Может ли кто-нибудь помочь мне, как мне рассчитать свои позиции смещения, когда у меня есть опция просмотра в моем svg.

Спасибо любая помощь и руководство будут оценены.