Question

我刚刚用snap.svg弄湿了脚，所以我有以下代码来加载我的svg：

<script>
window.onload = function () {
    // what is the below line of code doing ??
        var g = Snap();
        g.attr({
            viewBox: [0, 0, 800, 600]
        });
        Snap.load("samsonite.svg", function (f) {
            // function getShift(dot) {
            //     return "t" + (400 - dot.x) + "," + (300 - dot.y);
            // }
            console.log(f);
            var gr = f.select('#outer-most-group'),
            top = g.g();
            top.add(gr);
    });
};
</script>

现在，如果我正确地分解代码：

var g = Snap(); // create an instance of snap.

并且

Snap.load("samsonite.svg", function (f) { // Load the SVG using Snap.load()

但我并不自信地理解接下来的两行代码：

top = g.g();
top.add(gr); // I don't know what top is at this point but the add()
             // method is being used to add gr, which is basically
             // the outermost <g> element in the SVG I have.

有人请解释一下上面两行是做什么的吗？特别是行top = g.g()。

Answer 1

Snap方法TestFoo创建“组”元素（g()），与<g>创建圆元素的方式相同。所以g.circle()指的是您刚刚创建的组元素。 top也是一个组元素;它指的是与选择器gr匹配的元素。因此，'#outer-most-group'正在将已加载的svg文件中的一个组添加到您刚刚在snap实例上创建的组中。

有关组元素的更多信息：https://developer.mozilla.org/en/docs/Web/SVG/Element/g

什么是snap.svg脚本中使用的add（）方法？

1 个答案: