Ottieni le coordinate del gruppo svg su trascinamento con snap.svg

Question

Sono nuovo di zecca in svg e ho pensato di provare snap svg. Ho un gruppo di cerchi che sto trascinando e sto cercando di ottenere le coordinate del gruppo. Sto usando getBBox() per fare questo, ma non funziona come mi aspetterei. Mi aspetto che getBBox() aggiorni le sue coordinate x e y, ma non sembra farlo. Sembra semplice ma penso che mi manchi qualcosa. Ecco il codice

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); 

Il jsfiddle è a http://jsfiddle.net/STpGe/2/

Che cosa mi manca? Come potrei ottenere le coordinate del gruppo? Grazie.

Answer 1

Per il SVG specification, getBBox ottiene il riquadro di delimitazione dopo che le trasformazioni sono state applicate, quindi nel sistema di coordinate stabilito dall'attributo di trasformazione la posizione è la stessa.

Immagina come hai disegnato la forma su carta millimetrata impostando una trasformazione per spostare l'intera carta millimetrata ma quando guardi la posizione della forma sulla carta millimetrata non è cambiata, è la carta millimetrata che viene spostata ma sei non misurarlo.

Answer 2

Come dice Robert, non cambierà. Comunque getBoundingClientRect può aiutare.

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

Jsfiddle qui mostrando la differenza http://jsfiddle.net/STpGe/3/.

Edit: In realtà sarei tentato di andare qui prima, ho trovato questo molto utile Get bounding box of element accounting for its transform

Answer 3

tenta di utilizzare l'oggetto group.matrix per ottenere coordinate X e Y dell'oggetto gruppo.

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