Zmiana pozycji myszy po dodaniu okna podglądu

Question

Obecnie uczę się i pracuję w JavaScript i SVG i jestem na tym nowym. Oto mój scenariusz

Mam div, który ma SVG wewnątrz niego.

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

Teraz chcę poznać myszy pozycję względem mojego div więc napisałem następujący kod

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

to działa dobrze. Ale problem pojawia się, gdy mogę dodać funkcjonalność zmiany rozmiaru mojego div przy użyciu kwerendy resizable.To rozmiaru mojego SVG dodałem opcję viewBox w it.Now mój SVG wygląda tak

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

Ale teraz koordynować moja mysz nie są działa dobrze, a moja linia jest nieco większa od mojej myszy, a gdy zwiększam rozmiar div, znacznie się od niej oddalam. Czy ktokolwiek może mi doradzić, w jaki sposób muszę obliczyć moje pozycje przesunięcia Kiedy mam opcję widoku w moim svg.

Dzięki wszelkiej pomocy i wskazówek zostaną docenione.

Answer 1

Jeśli masz panel ViewBox, musisz pamiętać, że zdarzenia myszy dostarczają wartości w układzie współrzędnych klienta, a nie w systemie współrzędnych ustanowionym przez viewBox. This blogpost może pomóc w wyjaśnieniu tego, a tutaj jest example.

W skrócie, co trzeba zrobić, aby uzyskać współrzędne w obecnej przestrzeni użytkownika jest taka:

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

Zmienna p będzie teraz zawierać pozycję myszy w użytkownikiem systemu elementu El współrzędnych.