`getShift`和變換如何在SVG上工作

Question

我剛剛通過THIS SVG動畫演示，其直觀，我是通過JS代碼，並發現下面的代碼行;

var g = Snap(); 
g.attr({ 
    viewBox: [0, 0, 800, 600] 
}); 

Snap.load("map.svg", function (f) { 
    function getShift(dot) { 
     return "t" + (400 - dot.x) + "," + (300 - dot.y); 
    } 
    var gr = f.select("g"), 
     wrd = f.select("#world").attr({fill: "#fff"}), 
     syd = f.select("#sydney").attr({fill: "red"}), 
     msk = f.select("#san_francisco").attr({fill: "red"}), 
     pth = f.select("#flight"), 
     pln = f.select("#plane"), 
     top = g.g() 
    // DIFF above line of code , what is g.g(); 
    top.attr({ 
     mask: g.rect(100, 0, 600, 600).attr({ 
      fill: "r(.5,.5,.25)#fff-#000" 
     }) 
    }); 
    top.add(gr); 
    var click = top.text(410, 310, "click!").attr({ 
     font: "20px Source Sans Pro, sans-serif", 
     fill: "#fff" 
    }); 
    pth.attr({ 
     display: "none" 
    }); 
    // DIFF , i am not quite understanding below line of code. 
    pln = gr.g(pln, pln.clone()); 
    pln.attr({ 
     display: "none" 
    }); 
    pln[0].attr({ 
     stroke: "#fff", 
     strokeWidth: 2 
    }); 
    gr.attr({ 
     transform: getShift({ 
      x: syd.attr("cx"), 
      y: syd.attr("cy") 
     }) 
    }); 

現在我的問題是關於下面的行代碼：

    gr.attr({ 
         transform: getShift({ 
          x: syd.attr("cx"), 
          y: syd.attr("cy") 
         }) 
        }); 

我beleive gr正在轉換層，但我不完全理解這行代碼，究竟什麼是getShift當然我也明白上面的syd層的'cx'和'cy'屬性被用來轉換元素，但是這行代碼如何作爲一個整體工作，以及什麼是getShift？

Answer 1

getShift本身與Snap庫沒有任何具體關係。它在你包含代碼的頂部定義，並簡單地返回基於對象的字符串您提供：

function getShift(dot) { 
    return "t" + (400 - dot.x) + "," + (300 - dot.y); 
} 

所以，如果你getShift與具有以下屬性，{x: 10, y: 20}對象的參數，然後getShift將返回字符串"t380,290"。

然而，該字符串可以被Snap使用來轉換元素。具體來說，它使用如下：

gr.attr({transform: "t380,290"}); 

（根據我的虛構的初始值）。

它似乎正在嘗試做以下事情：翻譯整個組（"gr"）（即整個世界地圖？），以便澳大利亞悉尼（"syd"）的位置在座標（400， 300），也就是說，在屏幕/窗口/ div的一個令人愉快的視覺中心部分。沒有經過整個代碼，似乎這可能會爲動畫的結尾設置特徵。