グラムとは何ですか（）スナップSVGで

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は通常 'グループ'を意味します。しかし、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. 

これは、用紙/ svg要素に「グループ」コンテナを追加することを意味します。