Modifica della posizione del mouse quando viene aggiunta la viewbox

Question

Attualmente sto imparando e lavorando in JavaScript e SVG e sono nuovo ad esso. Ecco il mio scenario

Ho un div che ha un SVG al suo interno.

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

Ora voglio sapere la posizione del mouse relativa al mio div così ho scritto seguente codice

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

Si sta lavorando bene. Ma il problema si pone quando aggiungo una funzionalità di ridimensionamento al mio div utilizzando Query resizable.To ridimensionare il mio svg ho aggiunto un'opzione viewBox in it.Now mia svg assomiglia a questo

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

Ma ora coordinare il mio mouse non sono funziona bene e la mia linea è un po 'più lontana dal mio mouse e va più lontano dal mio mouse quando aumento la dimensione div. Qualcuno può gentilmente guidarmi come devo calcolare le mie posizioni di offset quando ho un'opzione viewbox nel mio svg.

Grazie a qualsiasi aiuto e guida sarà apprezzato.

Answer 1

Se si dispone di un viewBox, è necessario ricordare che gli eventi del mouse forniscono valori nel sistema di coordinate del client, non il sistema di coordinate stabilito tramite viewBox. This blogpost potrebbe aiutare a spiegare un po 'questo, ed ecco uno example.

In breve, ciò che è necessario fare per ottenere le coordinate nello spazio utente corrente è questo:

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 variabile p conterrà ora la posizione del mouse nella utente del sistema dell'elemento El coordinate.