javascript - 将 SVG 元素拖到新位置

Question

           if (action == "mousedown") {
                startx = x;
                starty = y;
            }

            if (action == "mousemove") {
                if (!mouseisdown) {
                    return;
                } else {
                    //console.log(target);
                    var transformX = x - startx;
                    var transformY = y - starty;
                    //                console.log(x, y, startx, starty);
                    var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
                    test.setAttribute('transform', transformAttr);
                }
            }

            if (action == "mouseup") {
                var transformX = x - startx;
                var transformY = y - starty;
                //                console.log(x, y, startx, starty);
                var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
                test.setAttribute('transform', transformAttr);
            }

下面是我获取x,y位置的方法:

            $("svg").on("mousedown", function (event) {
              mouseisdown = true;
              var offset = $("#center").offset();  //#center is the canvas
              var x = event.pageX - offset.left;
              var y = event.pageY - offset.top;                
              current_tool("mousedown", x, y, null);
            });

以上是我的部分代码，我的问题是这个函数在第一次移动时运行良好，但是当我第二次尝试移动它时，元素对象会突然回到第一次移动之前的原始位置，如何解决那个问题？感谢您的帮助。

Answer 1

            if (action == "mousedown") {
                startx = x - test.transform.animVal["0"].matrix.e;  //change
                starty = y - test.transform.animVal["0"].matrix.f;  // change2
            }

            if (action == "mousemove") {
                if (!mouseisdown) {
                    return;
                } else {
                    if (test.transform.animVal["0"]) {
                        console.log(test.transform.animVal["0"].matrix);
                        var transformX = x - startx;
                        var transformY = y - starty;
                        var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
                        test.setAttribute('transform', transformAttr);
                    }
                }
            }

            if (action == "mouseup") {
                var transformX = x - startx;
                var transformY = y - starty;
                //                console.log(x, y, startx, starty);
                var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
                test.setAttribute('transform', transformAttr);
            }

自己解决的问题，问题的原因是，当我尝试第二步时，开始位置没有考虑第一次变换，所以在“mousedown”处理程序中更改代码后，问题解决了.