Matrix 更新：Javascript逻辑在一个小函数中修复（SVG，获取绝对坐标）

新的： 下面是codepen的代码：

目前，函数UpdateCoords（draggable）-在代码中被注释掉

我想要的是在mouseup事件中将路径的坐标（这里的圆作为路径）更新为绝对坐标，并删除transform属性

但我没有做到这一点；）对不起，只是学习而已

旧的：

在我的代码中，有一个svg元素（路径），它通过transform=“translate（x，y）”属性在根svg obj（svg）周围拖动

我想更新这个path元素的属性“d”（描述所有坐标的字符串），以使用绝对坐标，并去掉transformed\translate

基本上： was:d=“M10,10 30,10 20,30”+transform=“translate（20,0）； 将是：d=“M30,10 50,10 40,30”+transform=“translate（0,0）”（或者如果我们可以删除该转换-甚至更好）

所以我编写了代码，为我做了这件事，但是有一个bug阻止了正确的结果

我确信我在这里做错了什么：

var v = Object.keys(path.controlPoints).length

//这里的控制点只是路径对象中的一个位置，我在这里存储路径的坐标

var matrix = path.transform.baseVal.consolidate();

//我验证了上面的行确实为我提供了正确的变换矩阵和正确的x，y转换值。下面我尝试循环并更新路径的所有控制点（坐标）

for (i=0; i<v; i++) {
  var position = svg.createSVGPoint();
  position.x = path.controlPoints["p"+i].x;
  position.y = path.controlPoints["p"+i].y;

//我肯定我在这里做错了什么，也许是因为我没有“清理”/重置这个循环或smth中的位置

---

对不起，我不是程序员，只是在学习东西，问题是-在这个代码中，如果我描述的目标是-我如何处理“位置”有问题吗？

好的，代码现在可以正常运行了

所以，在我想出了如何正确地获得矩阵之后，对于任何后续的拖动，我仍然有一个奇怪的位移。 我很清楚，这些位移甚至发生在我开始工作之前。 我对它进行了一点调试，意识到我没有清除用于拖动的.ux和.uy参数

现在代码工作了

---

}

如果您创建了一个并将其添加到问题中，而不是在这里或那里给我们一些代码片段，那么我们将最容易帮助您。此外，您还说“出了问题”“，但你没有说那到底是什么。说得好，我会添加一个指向codepen或其他东西的链接@Robert Longson&PaulI现在几乎把它修好了：-基本上是我通过getCTM（）获得的矩阵）不是我需要的那个。我确实合并了转换，然后选择了合并的矩阵。现在我想要的是第一次拖动（当你第一次拖动时）。但是当我想再次拖动相同的形状时-；（（它很乱）

  position = position.matrixTransform(matrix);
  path.controlPoints["p"+i].x = position.x;
  path.controlPoints["p"+i].y = position.y;
}

var svgNS = "http://www.w3.org/2000/svg";
var draggable = null;
var canvas = {};
var inventory = {};
var elementToUpdate = {};

//debug
var focusedObj = {};
var focusedObj2 = {};
// to be deleted

window.onload = function() {
  canvas = document.getElementById("canvas");
  inventory = document.getElementById("inventory");
  AddListeners();
}
function AddListeners() {
document.getElementById("svg").addEventListener("mousedown", Drag);
document.getElementById("svg").addEventListener("mousemove", Drag);
document.getElementById("svg").addEventListener("mouseup", Drag);
}

// Drag function //
function Drag(e) {
var t = e.target, id = t.id, et = e.type;  m = MousePos(e); //MousePos to    ensure we obtain proper mouse coordinates
if (!draggable && (et == "mousedown")) {
    if (t.className.baseVal=="inventory") { //if its inventory class item, this should get cloned into draggable
        copy = t.cloneNode(true);
        copy.onmousedown = copy.onmouseup = copy.onmousemove = Drag;
        copy.removeAttribute("id");
        copy._x = 0;
        copy._y = 0;
        canvas.appendChild(copy);
        draggable = copy;
        dPoint = m;
        } 
        else if (t.className.baseVal=="draggable")  { //if its just draggable class - it can be dragged around
            draggable = t;
            dPoint = m;
        }
    }
    // drag the spawned/copied draggable element now
    if (draggable && (et == "mousemove")) {
        draggable._x += m.x - dPoint.x;
        draggable._y += m.y - dPoint.y;
        dPoint = m;
        draggable.setAttribute("transform", "translate(" +draggable._x+","+draggable._y+")");
    }
    // stop drag
    if (draggable && (et == "mouseup")) {
        draggable.className.baseVal="draggable";
  UpdateCoords(draggable);
  console.log(draggable);
  draggable._x = 0;
  draggable._y = 0;
  draggable = null;
    }