jsFiddle: http://jsfiddle.net/az6Ug/SVG, как получить позицию мыши на внутренней матрицы
Использование библиотеки 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
}
);
}
Спасибо за ответ ... это работает в Chrome, но не в Firefox. В FF 'S.node.offsetLeft' не определено. – ServerBloke
Обновили ответ с более предпочтительной альтернативой, я думаю, это должно работать и в FFX. – Ian