Javascript 避免在拖动时使用文本定位点跳转SVG文本

以下是带有锚定的SVG文本：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:200px;height:200px;">
  <text x="50" y="30" fill="red" text-anchor="start">I love SVG</text>
</svg>

根据其锚定位置，它在拖动后会跳跃。有解决办法吗

我尝试将锚文本设置为null，然后再次重新设置，但这不起作用。我根本不想改变拖动的用户体验。即使拖动完成也不行

有什么想法吗

---

以下是JSIDLE:

使用

d3.event.dx

和

d3.event.dy

获得相对拖动位置更改，并将其应用于

dragMove（）

函数

---

此处演示：

您可以通过保存鼠标单击位置和

文本
元素原点之间的
x
和
y
偏移量来完成此操作。比如这里：
我认为d3不可能，但可以使用jQuery。查看offsetX和offsetY属性，您可以尝试使用本机拖放api。这是比我的答案更通用的方法。如果启用了viewbox属性，则此方法不起作用。有办法解决吗？！这使得它有点棘手。这应该是可能的，但是您需要使用从getCTM（）返回的矩阵（一个SVG DOM函数）来缩放dx和dy。看见d3也可能有内置的功能来帮助实现这一点，但我对d3还不太熟悉，无法给出明确的答案。否则，如果可以的话，请确保宽度和高度与viewBox的宽度和高度相同。因此，缩放比例为1:1.BigBadaboom，请检查下面的音乐方法，因为对于启用了viewBox属性的SVG，它实际上是开箱即用的。当涉及viewBox属性时，您的方法也能很好地工作。
var dragMove = function (d,i) {
    //d3.select(this).attr("text-anchor", "null"); Does not work
    d3.select(this).attr("x", d3.event.x)
                .attr("y", d3.event.y);
};

var dragEnd = function (d,i) {
    //d3.select(this).attr("text-anchor", "start"); Does not work
};

var drag = d3.behavior.drag()
                .on("drag", dragMove)
                .on("dragend", dragEnd);

d3.select("svg")
    .select("text")
    .call(drag);