Cambio en la posición del mouse cuando se agrega viewbox

Question

Actualmente estoy aprendiendo y trabajando en JavaScript y SVG y soy nuevo en él. Aquí está mi escenario

Tengo un div que tiene un SVG dentro.

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

Ahora quiero saber la posición del ratón en relación con mi div Así que escribí siguiente código

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

Se está trabajando muy bien. Pero el problema surge cuando agrego una funcionalidad de cambio de tamaño a mi consulta div usando resizable.To cambiar el tamaño de mi SVG he añadido una opción viewBox en it.Now mi SVG se parece a esto

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

Pero ahora coordinar mi ratón no son funciona bien y mi línea está un poco más lejos de mi mouse y va más lejos de mi mouse cuando aumento el tamaño de div. ¿Puede alguien amablemente guiarme cómo tengo que calcular mis posiciones de compensación cuando tengo una opción de viewbox en mi svg.

Gracias se apreciará cualquier ayuda y orientación.

Answer 1

Si tiene un viewBox, debe recordar que los eventos del mouse proporcionan valores en el sistema de coordenadas del cliente, no el sistema de coordenadas establecido a través de viewBox. This blogpost podría ayudar con explicar esto un poco, y aquí hay un example.

En resumen, lo que hay que hacer para obtener las coordenadas en el espacio de usuario actual es la siguiente:

var m = El.getScreenCTM(); 

// note: assumes the root is an <svg> element, replace 
// document.documentElement with your <svg> element. 
var p = document.documentElement.createSVGPoint(); 

p.x = evt.clientX; 
p.y = evt.clientY; 
p = p.matrixTransform(m.inverse()); 

La variable p contendrá ahora la posición del ratón en el usuario del sistema del elemento El coordenadas.