在鼠标移动其他元素时移动 svg 视口

Move svg viewport on mousemove of other element

本文关键字：移动 svg 视口 其他 鼠标 元素      更新时间：2023-09-26

我必须制作可拖动的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

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

  dx = e.offsetX - currentX + currentdx;
  dy = e.offsetY - currentY + currentdy;
相关文章：