使用snap.svg获取拖动时svg组的坐标

Question

我是svg的新手,我想我会尝试使用snap svg.我有一组我正在拖动的圈子,我正在寻找该组的坐标.我使用getBBox()来做这件事,但它没有像我期望的那样工作.我希望getBBox()更新它的x和y坐标,但它似乎没有这样做.这似乎很简单,但我想我错过了一些东西.这是代码

var lx = 0,
  ly = 0,
  ox = 0,
  oy = 0;
  moveFnc = function(dx, dy, x, y) {
      var thisBox = this.getBBox();
      console.log(thisBox.x, thisBox.y, thisBox);
      lx = dx + ox;
      ly = dy + oy;
      this.transform('t' + lx + ',' + ly);
  }
  startFnc = function(x, y, e) {  }
  endFnc = function() {
      ox = lx;
      oy = ly;  
      console.log(this.getBBox());
  };

var s = Snap("#svg");
var tgroup = s.group();
tgroup.add(s.circle(100, 150, 70), s.circle(200, 150, 70));
tgroup.drag(moveFnc, startFnc, endFnc);

jsfiddle位于http://jsfiddle.net/STpGe/2/

我错过了什么？我如何获得该组的坐标？谢谢.

Answer 1

正如罗伯特所言,它不会改变.但是getBoundingClientRect可能有所帮助.

this.node.getBoundingClientRect(); //from Raphael

Jsfiddle在这里展示了差异http://jsfiddle.net/STpGe/3/.

编辑:其实我很想先到这里去,我发现这个非常有用获取元素的边界框来解释它的变换

Answer 2

根据SVG规范,getBBox在应用变换后获取边界框,因此在由transform属性建立的坐标系中,位置是相同的.

想象一下,就像你在方格纸上绘制形状一样,变换会移动整个方格纸,但是当你在方格纸上看到形状的位置它没有改变时,它就是被移动的方格纸,但你没有测量它.