Thay đổi vị trí chuột khi hộp xem được thêm

Question

Tôi hiện đang học và làm việc trong JavaScript và SVG và tôi mới làm quen với nó. Đây là kịch bản của tôi

Tôi có một div có một SVG bên trong nó.

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

Bây giờ tôi muốn biết vị trí chuột so với div của tôi vì vậy tôi đã viết mã sau

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

Nó đang làm việc tốt. Nhưng vấn đề nảy sinh khi tôi thêm một chức năng thay đổi kích thước để div của tôi sử dụng truy vấn resizable.To thay đổi kích thước svg tôi thêm một lựa chọn viewBox trong it.Now svg của tôi trông như thế này

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

Nhưng bây giờ phối hợp chuột của tôi không làm việc tốt và dòng của tôi là một chút xa hơn từ con chuột của tôi và nó đi xa hơn từ con chuột của tôi khi tôi tăng kích thước div. Có thể bất kỳ ai vui lòng hướng dẫn tôi làm thế nào để tôi có để tính toán vị trí bù đắp của tôi Khi tôi có một tùy chọn viewbox trong svg của tôi.

Cảm ơn mọi trợ giúp và hướng dẫn sẽ được đánh giá cao.

Answer 1

Nếu bạn có một hộp xem thì bạn cần phải nhớ rằng các sự kiện chuột cung cấp các giá trị trong hệ tọa độ khách, chứ không phải hệ tọa độ được thiết lập thông qua viewBox. This blogpost có thể giúp giải thích điều này một chút và đây là một số example.

Nói tóm lại, những gì bạn cần phải làm để có được tọa độ trong không gian sử dụng hiện tại là thế này:

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

Các p biến bây giờ sẽ bao gồm các vị trí chuột ở người sử dụng hệ thống của phần tử El phối hợp.