将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);
            });

以下是我的代码的一部分，我的问题是这个函数在第一次移动时运作良好，但是当我尝试第二次移动它时，元素对象会突然返回到它的初始位置。如何解决这个问题？任何帮助将不胜感激。

- pyy

---

你的代码中没有更新x和y的值。请用新的坐标进行更新。 - kp singh

@kpsingh 你的意思是我需要更新椭圆的cx和cy，矩形的x和y吗？因为我还需要移动一组元素，仅更新x和y似乎对g元素无效... - pyy

你是从哪里获取变换属性的平移当前值的？ - Robert Longson

@RobertLongson 谢谢，我已经更新了这部分。 - pyy

所以问题就像我说的那样。你没有得到当前变换属性的平移。 - Robert Longson

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”处理程序中更改代码后，问题得到解决。

- pyy