javascript - 克隆如何在snap.svg库中工作？

我只是在浏览SVG example here，我对在源代码中看到的一行代码感到困惑。代码如下所示：

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 = gr.g(pln, pln.clone());

如果我尝试将其分解，那么我会发现pln是SVG的元素之一，从代码pln = f.select("#plane"),的行中可以明显看出，而代码pln.clone()的行只是在克隆该元素。似乎在snap.svg docs中。

我感到困惑的是gr.g部分。我相信gr在代码中似乎是最外层的元素是SVG，而g是snap库的一个实例，因此pln = gr.g(pln, pln.clone());这行在某种程度上是没有意义的。有人可以解释吗？

最佳答案

编辑：注意，代码顶部的'g'只是用于纸张的变量（对于Snap来说，最好将该变量称为'paper'或's'）。但是对于gr.g（），g（）是作用于变量gr（在这种情况下为组）的方法。因此，请勿将变量“ g”与方法element.g（）混淆，它们是完全不同的东西。在这种情况下，命名确实很不好。

如果我们在代码的前面看过，Snap已经通过css选择器分配了DOM元素，所以我们最终得到了变量...

gr =已加载map.svg文件中的第一个g / group元素
pln = SVG中ID为“ plane”的元素。

g（）是Snap元素的组创建函数。

因此，pln =第一个组元素，使用g（）创建一个组，在该组中，我们将添加原始平面以及平面的副本/克隆。

因此pln最初是代表该平面的svg元素或组。现在pln是一个包含2个相同平面的组。

他为什么要这样做？我认为其效果会稍有不同。将一个没有笔触的平面覆盖到另一个更大笔划的平面上。（我不太确定为什么他不仅仅拥有一架大行程的飞机，也许看起来有些不同）

关于javascript - 克隆如何在snap.svg库中工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39213653/

PLN

javascript - 克隆如何在snap.svg库中工作？