snap SVG 中的 g() 是什么

Question

大家好，我正在经历 THIS snap.svg 演示，现在当我在本地计算机上检查代码时，它看起来如下所示：

        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 通常表示 'group'。但是，Snap() 不是 return 组，它 return 是一个 Snap 'svg' 元素。

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

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

或

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

那么它会导致这一行，'looks'阅读时更正确...

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

这意味着向 paper/svg 元素添加一个 'group' 容器。

snap SVG 中的 g() 是什么

What is g() in snap SVG

javascript

svg

snap.svg