title: How does `getShift` and transform work on an SVG
body: <p>I was just going though <strong><a href="http://snapsvg.io/demos/#globe" rel="nofollow">THIS</a></strong> SVG animation demo , its pritty straightforward , i was jus tgoing through the JS code and came actoss the below lines of code;</p>
  
  <pre><code>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")
          })
      });
  </code></pre>
  
  <p>Now my question is about the below lines of code:</p>
  
  <pre><code>                  gr.attr({
                          transform: getShift({
                              x: syd.attr("cx"),
                              y: syd.attr("cy")
                          })
                      });
  </code></pre>
  
  <p>I beleive the layer <code>gr</code> is being transform , but i don't entirely understand this line of code , What exactly is <code>getShift</code> and ofcourse i do understand that the 'cx' and 'cy' attributes of the <code>syd</code> layer above are being used to transform the elements, but how does this line of code work as a whole and also what is <code>getShift</code> ? </p>