Question

我刚刚经历了这个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"),和代码行{{1}可以看出这一点。只是在snap.svg docs中可以看出克隆元素。

我感到困惑的是pln.clone()部分。 gr.g我相信在代码中可以看出最外面的元素是SVG而gr是快照库的一个实例，所以行g不知何故是没有意义的。有人会解释一下吗？

Answer 1

修改：注意＆＃39; g＆＃39;在代码的顶部只是一个已经用于纸张的变量（对于变量被调用＆＃39;纸张或者对于Snap来说更好）。但是对于gr.g（），g（）是一个作用于变量gr的方法（在本例中是一个组）。所以不要得到变量＆＃39; g＆＃39;与方法element.g（）相混淆，它们是非常不同的东西。在这种变量的情况下命名非常糟糕。

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

gr =已加载的map.svg文件中的第一个g / group元素 pln = svg中具有id＆＃39; plane＆＃39;。

的元素

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

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

所以pln最初是一个代表飞机的svg元素或组。现在，pln是一个包含2个相同平面的组。

他为什么要这样做？我认为它会产生略微不同的效果。覆盖一个平面，没有笔划而另一个平面覆盖更大的笔划。（我不太确定为什么他不会只有一架大飞机，但也许看起来有点不同）

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

1 个答案: