Alexander Solonik Alexander Solonik - 2 months ago 6x
Javascript Question

What is g() in snap SVG

Hey guys i was going through THIS snap.svg demo, Now when i check the code on my local machine , it looks like below:

var g = Snap();
viewBox: [0, 0, 800, 600]

Snap.load("map.svg", function (f) {
function getShift(dot) {
return "t" + (400 - dot.x) + "," + (300 - dot.y);
var gr ="g"),
wrd ="#world").attr({fill: "#fff"}),
syd ="#sydney").attr({fill: "red"}),
msk ="#san_francisco").attr({fill: "red"}),
pth ="#flight"),
pln ="#plane"),
top = g.g();
mask: g.rect(100, 0, 600, 600).attr({
fill: "r(.5,.5,.25)#fff-#000"

I am just posting the initial part of the code that i am struggling to understand , in the above portion of the code there is the below line:

top = g.g();

Now of course looking at the snippet you can see that
is an instance of
but why the above line of code ?? The SVG i am dealing with is THIS.

I am not quite understanding the line of code
. Can anybody explain ?

Ian Ian

Oddly their code is slightly confusing. First of all I would not do this, I'm a little surprised...

var g = Snap();

g normally means 'group'. However, Snap() does NOT return a group, it returns a Snap 'svg' element.

So instead I think they would normally do the following now which reads better...

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


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

So then it would lead to this line instead, which 'looks' more correct when reading...

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

Which means add a 'group' container to the paper/svg element.