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

【问题标题】：How to retrieve element's coordinates relative to an svg viewbox?如何检索元素相对于 svg 视图框的坐标？
【发布时间】：2012-09-23 18:46:28
【问题描述】：

在我的 index.html 中，我有一个 svg 视图框：

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

我希望为我创建的 svg 椭圆设置动画，这样当单击椭圆时，它会垂直移动到某个 y 点，我们将称为 TOP，如果再次单击，则会返回到其原始位置，称为 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 也是如此）。这似乎是 transform translate 方法如何工作的结果。我相信如果我创建一个函数来动态返回椭圆应该相对于鼠标点击的位置（或者更好的是，椭圆当前的位置）平移的量，我可以解决这个问题。问题是我不知道如何获取元素相对于 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])
        });
    })

【问题讨论】：

你为什么用 translate 做动画，用 x 和 y 移动？
我不明白这个问题？我对这一切都很陌生。有没有更好的方法？
当您可以使用一个属性处理所有事情时，您需要跟踪两个单独的属性。

标签： javascript google-chrome svg d3.js viewbox

【解决方案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;
}
});

【讨论】：