Question

我只是去了 THIS SVG动画演示，它的直截了当，我正在通过JS代码并且下面是代码行的actoss;

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当然我明白了＆＃39; cx＆＃39;和＆＃39; cy＆＃39;上面syd图层的属性用于转换元素，但这行代码如何作为一个整体以及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"）（即整个世界地图？），以便澳大利亚悉尼的位置（{{1 }}）在坐标（400,300）处结束，即在屏幕/窗口/ div的一个令人愉快地可见的中央部分。没有经过整个代码，似乎这可能是为动画结束设置特征。

如何`getShift`和转换SVG上的工作

1 个答案: