避免在拖动时跳过带有文本锚点的SVG文本 [英] Avoid jumping of an SVG Text with text-anchor while dragging

问题描述

这是一个带锚点的SVG文本：

 < svg xmlns =http：//www.w3。 org / 2000 / svgversion =1.1style =width：200px; height：200px;> 
< text x =50y =30fill =redtext-anchor =start>我喜欢SVG< / text& 
< / svg> 
  

现在，如果我写了一个drag函数：

  var dragMove = function（d，i）{
 //d3.select(this).attr(\"text-anchor，null）;不工作
 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）;不工作
}; 
 
 var drag = d3.behavior.drag（）
 .on（drag，dragMove）
 .on（dragend，dragEnd）; 
 
 d3.select（svg）
 .select（text）
 .call（drag）; 
  

根据锚点位置拖动它后跳转。是否有解决方案？

我试图将锚文本设置为null，然后重新设置它，但不起作用。我不想让用户体验的拖动改变。

这里是JSFiddle： http://jsfiddle.net/sewVr/

解决方案

您可以通过保存 x 和 y 鼠标点击发生，并且文本元素的来源。像这里： http://jsfiddle.net/twKD9/

Here is an SVG Text with an anchor:

<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>

Now if I write a drag function:

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

It jumps after you drag it depending to its anchor position. Is there a solution to this?

I tried setting the anchor-text to null and then re-set it again but that does not work. I do not want the user experience of dragging to change at all. Not even when the dragging finishes.

Any idea?

Here is the JSFiddle: http://jsfiddle.net/sewVr/

解决方案

You can do it by saving how much were the x and y offset between the place where the mouse click happened and the origin of the text element. Like here: http://jsfiddle.net/twKD9/

这篇关于避免在拖动时跳过带有文本锚点的SVG文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！