SVG Chụp tọa độ chuột

Question

Tôi biết câu hỏi liên quan đến tọa độ chuột svg đã được hỏi ở đây trước đây, nhưng tôi khá bối rối bởi hành vi hiện tại tôi đang gặp phải và không có chủ đề nào có vẻ như giải quyết nó.

Phương pháp tôi sử dụng cho tọa độ chụp:

var pt = svg.createSVGPoint(); // Created once for document 

function alert_coords(evt) { 
    pt.x = evt.clientX; 
    pt.y = evt.clientY; 

    // The cursor point, translated into svg coordinates 
    var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse()); 
    console.log("(" + cursorpt.x + ", " + cursorpt.y + ")"); 
} 

Vấn đề là với chuyển đổi click chuột phối vào svg tọa độ trong không gian sử dụng. Tôi đang sử dụng các tọa độ để kéo một hình chữ nhật trên màn hình, và khi con trỏ đi xa hơn về bên phải trong không gian svg, các tọa độ trở nên ngày càng bị lệch. Để kiểm tra điều này một cách đơn giản, tôi đặt ba hình chữ nhật trong không gian svg toàn cầu tại (100, 500), (500, 500), (1000, 500) và (1000, 200). Sử dụng chức năng ghi đơn giản, các tọa độ tôi nhận được (cộng hoặc trừ 5 đối với sự không chính xác của chuột) là (98, 473), (487, 470), (969, 471), (969, 190). Như bạn có thể thấy thêm dọc theo trục x hoặc y chuột đi, nó càng không chính xác. Tôi đã cố gắng tái tạo điều này bằng cách sử dụng phương pháp tương tự để chụp tọa độ chuột, nhưng tôi không thể sao chép nó ở đó ... Một điều nữa cần lưu ý là có thể đáng kể là khi tôi đăng nhập tài liệu svg, chiều rộng và chiều cao được đặt thành giá trị hơi nhỏ hơn giá trị của hộp xem, ví dụ: Chiều rộng 1380 và chiều cao 676 cho giá trị viewbox của "0 0 1400 700". Dù sao, đây là fiddle, tất cả các tài sản svg là giống như họ đang có trong chương trình của tôi.

http://jsfiddle.net/ASLma/11/

Answer 1

Có vẻ như sự cố đã mở trực tiếp svg trong trình duyệt. Thay vào đó, tôi nhúng nó vào một trang html thông qua một thẻ nhúng, và nó hoạt động rất tốt. Tôi không chắc tại sao điều đó lại quan trọng về mặt độ chính xác của chuột, nhưng giải pháp là một giải pháp.