javascript - snap SVG 中的 g() 是什么

Question

嘿伙计们，我正在经历 THIS snap.svg demo，现在当我在本地机器上检查代码时，如下所示:

        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();
            top.attr({
                mask: g.rect(100, 0, 600, 600).attr({
                    fill: "r(.5,.5,.25)#fff-#000"
                })
            });

我只是发布我很难理解的代码的初始部分，在代码的上面部分中有以下行:

top = g.g(); 

现在，当然查看代码片段，您可以看到 g 是 snap() 的实例，但是为什么上面的代码行？我正在处理的 SVG 是 THIS 。

我不太理解代码行g.g()。有人能解释一下吗？

Answer 1

奇怪的是他们的代码有点令人困惑。首先我不会这样做，我有点惊讶......

var g = Snap();

g 通常表示“组”。但是，Snap() 不返回组，而是返回 Snap 'svg' 元素。

因此，我认为他们现在通常会执行以下操作，这样读起来更好......

var s = Snap()   // its an svg or snap instance 

或

var paper = Snap() // its typically known as a paper you draw on

那么它会导致这一行，在阅读时“看起来”更正确......

var top = paper.group() // you can use g and group interchangeably.

这意味着将“组”容器添加到 paper/svg 元素。