Get svg group coordinates when dragging using snap.svg

Question

I am new to svg and thought I would try snap svg. I have a group of circles that I drag and I want to get the coordinates of the group. I use getBBox () for this, but it does not work as I expected. I would expect getBBox () to update its x and y coordinates, but that doesn't seem to be the case. It seems simple, but I think something is missing. Here is the code

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 is at http://jsfiddle.net/STpGe/2/

What am I missing? How to get group coordinates? Thanks.

Answer 1

As Robert says, this will not change. However, getBoundingClientRect may help.

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

The jsfiddle here shows the difference http://jsfiddle.net/STpGe/3/ .

Edit: Actually, I would like to visit here first, I found it very useful to Get the bounding box of an element that takes into account its transformation

Answer 2

According to the SVG specification, getBBox gets a bounding box after applying transformations, so the position is the same in the coordinate system set by the transform attribute.

Imagine that you have drawn a figure on graphic paper, the transformation moves the entire graphic paper, but when you look at the position of the figure on graphic paper, it has not changed, it is printed paper that moved, but you are not measuring it.

Answer 3

Try using the group.matrix object to get the x and y coordinates of the group object.

 moveFnc = function(dx, dy, x, y, event) { lx = this.matrix.e; ly = this.matrix.f; this.transform('translate(' + lx + ',' + ly+')'); }