这是带有 anchor 的 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>
现在如果我编写一个拖动函数:
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);
拖动它后,它会根据其 anchor 位置跳跃。有没有办法解决这个问题?
我尝试将 anchor 文本设置为 null,然后再次重新设置,但这不起作用。我根本不希望拖动的用户体验发生改变。即使拖动完成也不行。
有什么想法吗?
这是 JSFiddle:http://jsfiddle.net/sewVr/
最佳答案
使用 d3.event.dx
和 d3.event.dy
获取相对拖动位置变化并将其应用到 dragMove()
> 功能。
关于javascript - 拖动时避免使用文本 anchor 跳跃 SVG 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19249227/