使用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

根據SVG specification，getBBox在應用變換之後獲取邊界框，因此在由transform屬性建立的座標系中位置相同。

想象一下，如果您在圖紙上繪製了形狀，則設置變換會移動整個圖紙，但是當您在圖形紙上查看圖形的位置時，它沒有改變，它是移動的圖形紙，但是您不測量。

Answer 2

正如羅伯特所說，它不會改變。但是getBoundingClientRect可能會有所幫助。

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

Jsfiddle這裏顯示的區別http://jsfiddle.net/STpGe/3/。

編輯：其實我會忍不住先跑到這裏，我發現這是非常有用的Get bounding box of element accounting for its transform

Answer 3

嘗試使用group.matrix對象獲取x和組對象的y座標。

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