5
我知道關於svg鼠標座標的問題已經在這裏提出過了，但是我對目前的行爲感到困惑，並且沒有一個線程似乎可以解決它。SVG捕捉鼠標座標
我使用用於捕獲的座標的方法：
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 + ")");
}
問題是與轉換鼠標點擊座標轉換成SVG在用戶空間中的座標。我使用座標在屏幕上拖動一個矩形，隨着光標在svg空間中進一步向右移動，座標變得越來越傾斜。爲了以簡單的方式測試這個，我在（100,500），（500,500），（1000,500）和（1000,200）的全局svg空間中放置了三個矩形。使用簡單的日誌記錄功能，我接收的座標是（98,473），（487,470），（969,471），（969,190）。正如你可以看到鼠標沿着x或y軸進一步移動，它變得越不準確。我試圖在一個小提琴中使用捕獲鼠標座標的相同方法複製這個，但我無法在那裏複製它...還有一件需要注意的事情可能很重要的事實是，當我記錄svg文檔時，寬度和高度設置爲略小於視框值的值，即。給定「0 0 1400 700」的視圖框值的1380寬度和676高度。無論如何，這裏是小提琴，所有的svg屬性都和我的程序中一樣。