在snap.svg脚本中使用的add()方法是什么?

What is add() method being used for in snap.svg script?

本文关键字：add 方法 是什么 svg snap 脚本      更新时间：2023-09-26

我刚刚开始使用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()这条线。

Snap方法g()创建了一个"group"元素(<g>)，就像g.circle()将创建一个circle元素一样。所以top指的是你刚刚创建的group元素。gr也是一个群元素;它指的是匹配选择器'#outer-most-group'的元素。所以，top.add(gr)是从加载的svg文件中添加一个组到您刚刚在snap实例上创建的组。

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

相关文章：