拖SVG元素到新的位置

  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元素到新的位置

  $("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); 
      });

以上是我的代碼的一部分，我的問題是這樣的功能運作良好的第一招，但是當我第二次嘗試移動它時，元素對象會在第一次移動之前突然回到原點位置，如何解決該問題？任何幫助表示讚賞。

來源

2017-06-13 Steveeeeee

您未更新代碼中的x和y。只需更新座標 –

@kpsingh你的意思是我需要更新cx和cy的橢圓，x，y的rect？因爲我還需要移動元素組，所以更新x，y似乎不適用於g元素.... – Steveeeeee

它在哪裏獲取transform屬性轉換的當前值？ –

  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」代碼處理程序後，，問題解決了。

來源

2017-06-13 14:31:29 Steveeeeee

拖SVG元素到新的位置

回答

相關問題