jsfiddle：http: //jsfiddle.net/az6Ug/
使用 Snap.svg 库，我想拖动 SVG 并获取鼠标位置。我需要内部矩阵上的鼠标位置，而不是浏览器鼠标位置。我有一个问题，那就是如果 SVG 所属的窗口上有任何滚动，则计算出的鼠标位置会被滚动条上的滚动量所抵消。
例如，没有滚动则可以正常工作。或者在滚动条上垂直滚动10px，鼠标位置计算为：真实位置+10px。如果有任何水平滚动也是一样的：被滚动量抵消。
在 jsFiddle 中，我使用一个矩形来显示拖动时计算的鼠标位置。如您所见，如果没有滚动，则矩形会停留在鼠标光标上（左上角）。但是通过一些滚动，矩形会从鼠标光标偏移。
虽然我使用的是 Snap.svg 库，但我只使用它来获取拖动事件，鼠标计算是纯 Javascript。一种可能的解决方案是通过滚动量减去 X 和 Y，但我认为使用 SVG 的转换函数会有更好的方法。
var S;
var pt;
var svg
var box;
window.onload = function(){
svg = $('#mysvg')[0];
S = Snap(svg);
pt = pt = svg.createSVGPoint(); // create the point
// add the rectangle
box = S.rect(10, 10, 50, 50);
box.attr({ fill : 'red', stroke : 'none' });
S.drag(
function(dx, dy, posX, posY, e){
//onmove
pt.x = posX;
pt.y = posY;
// convert the mouse X and Y so that it's relative to the svg element
var transformed = pt.matrixTransform(svg.getScreenCTM().inverse());
box.attr({ x : transformed.x, y : transformed.y });
},
function(){
//onstart
},
function(){
//onend
}
);
}
