`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的一个令人愉快的视觉中心部分。没有经过整个代码，似乎这可能会为动画的结尾设置特征。