如何檢索相對於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; 
} 
});