如何检索相对于svg视框的元素坐标？

Question

在我的index.html我有一个SVG视框：

<svg viewBox = "0 0 2000 2000" version = "1.1"> 
</svg> 

我希望我的动画创建，使得点击椭圆时，垂直移动到一定Ÿ点，我们称之为顶部的椭圆SVG ，如果再次点击则返回到其原始位置BOTTOM。目前我正在使用下面的代码，它在一定程度上起作用。

var testFlag = 0;  
d3.select("#ellipseTest").on("click", function(){ 
if (testFlag == 0){ 
    d3.select(this) 
     .attr("transform", "translate(0,0)") 
     .transition() 
     .duration(450) 
     .ease("in-out") 
     .attr("transform", "translate(0,-650)") 
    testFlag = 1; 
}else{ 
d3.select(this) 
     .attr("transform", "translate(0,-650)") 
     .transition() 
     .duration(450) 
     .ease("in-out") 
     .attr("transform", "translate(0,0)") 
testFlag = 0; 
} 
}); 

然而，问题是我也已将椭圆拖动到顶点TOP，直到点BOTTOM。因此，如果我将椭圆在TOP和BOTTOM之间中途拖动，然后单击该椭圆，它会在 TOP之上垂直地动画，而不是在达到TOP时停止（并且在动画向下时像BOTTOM一样明智）。这似乎是转换转换方法如何工作的结果。 我相信我可以解决这个问题，如果我创建一个函数，动态返回椭圆应该翻译的相对于鼠标点击的位置（或更好的位置，椭圆当前的位置）。问题是我无法弄清楚如何获取元素相对于viewbox的当前y位置，而我只能获得相对于整个页面的位置。

这里是我用得到我点击的位置，故障代码：

var svg2 = document.getElementsByTagName('svg')[0]; 
var pt = svg2.createSVGPoint(); 
document.documentElement.addEventListener('click',function(evt){  
    pt.x = evt.clientX; 
    pt.y = evt.clientY; 
    console.log('Position is.... ' + pt.y); 
},false); 

这是我工作的代码，使椭圆可拖动：

//These points are all relative to the viewbox 
var lx1 = -500; 
var ly1 = 1450; 
var lx2 = -500; 
var ly2 = 800; 
function restrict(mouse){ //Y position of the mouse 
    var x; 
    if ((mouse < ly1) && (mouse > ly2)) { 
     x = mouse; 
    }else if (mouse > ly1){ 
     x = ly1; 
    }else if (mouse < ly2) { 
     x = ly2; 
    } 
    return x; 
} 


var drag = d3.behavior.drag() 
    .on("drag", function(d) { 
     var mx = d3.mouse(this)[0]; 
     var my = d3.mouse(this)[1]; 


     d3.select("#ellipseTest") 
     .attr({ 
      cx: lx2, 
      cy: restrict(d3.mouse(this)[1]) 
     }); 
    }) 

Answer 1

动画cy代替转化...

var testFlag = 0;  
d3.select("#ellipseTest").on("click", function(){ 
if (testFlag == 0){ 
    d3.select(this) 
     .transition() 
     .duration(450) 
     .ease("in-out") 
     .attr("cy", 0) 
    testFlag = 1; 
}else{ 
d3.select(this) 
     .transition() 
     .duration(450) 
     .ease("in-out") 
     .attr("cy", 650) 
testFlag = 0; 
} 
});