在其他元素的 mousemove 上移动 svg 视口

Question

我必须制作可拖动的 svg 元素（视口）。

 $('.zoom_panel').mousedown(function(e) {
        if (!drag.state && e.which == 1) {
            drag.elem = $('#graph_stage svg .viewport');
            drag.state = true;
            currentX =  $(drag.elem).offset().left;
            currentY =  $(drag.elem).offset().top;
        }
        return false;
    });
    $('.zoom_panel').mousemove(function(e) {
        if (drag.state) {
            var attrs =  $(drag.elem).attr('transform').split(' ')[1];
            dx = e.offsetX - $(drag.elem).offset().left;
            dy =  e.pageY - $(drag.elem).offset().top;
            newMatrix =  'translate('+( dx )+','+( dy )+') '+attrs;
            $(drag.elem).attr('transform',newMatrix);

        }
    });

svg 不动它的闪烁。 jsfiddle

Answer 1

试试这个jsfiddle

尝试使用相对位置来设置 dx。

  dx = e.offsetX - currentX + currentdx;
  dy = e.offsetY - currentY + currentdy;