javascript - Snapsvg create hole in rectangle using mask -

is possible create example circular hole in rectangle element in snapsvg? tryed use white , black elements , mask function cant figure out. results inverted (i saw circle color of rectangle) or no effect @ all. , searching google not helping either - relevant thing found that when tryed replicate using snapsvg did not work tryed describe before (i must admit, im not sure if mine fault or because snapsvg mask handling).

its realy important simple solution using rectangle , not using paths or simillar things.

what im trying achieve simillar gamemaker surfaces - dark foreground hole (light) see background trought it.

also im looking solution handle more 1 circle hole in element , dynamic position changes.

thx answer, hope possible.

ps: sorry english, im not english speaking country

here go. i've loosely recreated image. i've made black rectangle hole in can see green background through.

var s = snap("#svg");    // make green rectangle. see through mask.  var greenbg = s.rect(0,0, 400,300);  greenbg.attr({      fill: "darkseagreen"  });    // create mask.  // want mask hole through rectangle, mask  // needs white (solid) rectangle black (hole) circle  // on top of it.  var maskrect = s.rect(0,0, 400,300);   // rect  maskrect.attr({      fill: "white"  });  var maskcircle = s.circle(140,130, 80);  // circular hole  // group these 2 items create combined object becomes mask.  spotlightmask = s.group(maskrect, maskcircle);    // add black foreground rectangle apply mask to.  var blackfg = s.rect(0,0, 400,300);  // attch mask black foreground rect.  blackfg.attr({      mask: spotlightmask  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>  <svg id="svg" width="500" height="500"></svg>