Ändern der Mausposition, wenn die Viewbox hinzugefügt wird

Question

Ich lerne und arbeite derzeit in JavaScript und SVG und bin neu damit. Hier ist mein Szenario

Ich habe ein div, das ein SVG in sich hat.

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

Jetzt möchte ich die Mausposition relativ zu meinem div wissen, damit ich Code folgende schrieb

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

Es funktioniert gut. Aber das Problem entsteht, wenn ich ein Resize-Funktionalität in meine div mit Abfrage hinzufügen resizable.To meine svg die Größe habe ich eine viewBox Option in it.Now meine svg wie diese

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

Aber jetzt meine Maus sieht koordinieren nicht sind funktioniert gut und meine Linie ist ein bisschen weiter von meiner Maus und es geht weiter von meiner Maus, wenn ich die div-Größe zu erhöhen. Kann mich jemand freundlich beraten, wie ich meine Offset-Positionen berechnen muss, wenn ich eine Viewbox-Option in meiner Svg.

Dank jede Hilfe und Anleitung wird geschätzt.

Answer 1

Wenn Sie ein ViewBox haben, dann müssen Sie daran denken, dass Mausereignisse Werte im Client-Koordinatensystem liefern, nicht das über viewBox festgelegte Koordinatensystem. This blogpost könnte helfen, dies ein wenig zu erklären, und hier ist ein example.

Kurz gesagt, was Sie brauchen, um die Koordinaten im aktuellen Benutzerraum zu bekommen zu tun, ist dies:

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()); 

Die Variable p jetzt die Mausposition im Benutzerkoordinatensystem des Elements El enthalten wird.