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

时间:2012-10-02 21:08:10

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

在我的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转换方法的工作原理。 我相信如果我创建一个函数来动态返回椭圆相对于鼠标点击的位置(或者更好的是,椭圆当前位置的位置)的数量,我可以解决这个问题。问题是我无法弄清楚如何获取元素相对于视图框的当前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])
        });
    })

1 个答案:

答案 0 :(得分:3)

动画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;
}
});