`getShift` 和 transform 如何在 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")
                        })
                    });

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

Answer 1

getShift 本身与 Snap 库没有任何关系。它在您包含的代码的顶部定义，并且只是 returns 一个基于您提供的对象的字符串：

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

因此，如果您使用具有以下属性的对象的参数调用 getShift，{x: 10, y: 20}，那么 getShift 将 return 字符串 "t380,290" .

但是，Snap 然后可以使用该字符串来转换元素。具体使用如下：

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

（基于我虚构的初始值）。

它似乎正在尝试做以下事情：翻译整个组（"gr"）（即整个世界地图？）使得澳大利亚悉尼的位置（"syd" ) 在坐标 (400, 300) 处结束，即在 screen/window/div 的一个令人愉快的可见的中心部分。不看整个代码，好像是在设置动画结束的特性。

`getShift` 和 transform 如何在 SVG 上工作

How does `getShift` and transform work on an SVG

javascript

svg

snap.svg