snap.svgスクリプト

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() 

しかし、私は自信を持って次の2行のコードの理解はかなり100％ではない午前：

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. 

を誰かが上記の2行は何をしているか説明していただけますか？特にtop = g.g();という行があります。

ありがとうございます。

Answer 1

Snapメソッドg()は、g.circle()が円要素を作成するのと同じ方法で、「group」要素（<g>）を作成します。 topは、作成したばかりのgroup要素を参照しています。 grもグループ要素です。セレクタ'#outer-most-group'に一致する要素を参照します。したがって、top.add(gr)は、ロードしたsvgファイルからスナップのインスタンス上で作成したばかりのグループにグループを追加しています。グループ要素の

より：https://developer.mozilla.org/en/docs/Web/SVG/Element/g