javascript - getShift和transform如何在SVG上工作

我只是通过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")
                        })
                    });

我相信gr层正在被转换，但是我并不完全理解这一行代码，getShift到底是什么，当然我确实理解了syd层的'cx'和'cy'属性上面的代码用于转换元素，但是这行代码是如何整体工作的，getShift是什么？

最佳答案

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的中央部分令人愉悦的位置。无需遍历整个代码，这似乎可能是在动画结束时设置了特征。

关于javascript - getShift和transform如何在SVG上工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39186264/