An SVG rectangle with multiple holes using Snap.svg

[Georg Mierau]

I'm trying to get a rectangle with many (transparent, not just of the same color as the background!) round holes, but my code does the opposite.

I know why, but I don know how to generate a suitable mask for this case.

var s = Snap(500, 500);

var rectangle = s.rect(10, 10, 250, 250, 0, 0).attr({'fill':'white', 'stroke':'white'});
var group = s.group();  

for (i = 0; i < 5; i++) {
 for (j = 0; j < 5; j++) {
 s.circle(25+i*25, 25+j*25, 10).attr({'fill':'black', 'stroke':'black'}).appendTo(group);      
 }
}  

rectangle.attr({'mask':group});

I'm using Snap.svg 0.3.0. http://codepen.io/anon/pen/PwxPMG

[Ian]

Just to clarify, what effect are you after, what colour do you want background, rect, circles to be ?

I suspect you may want to put an added rect into the group, but not sure from you description.

[Georg Mierau]

Background has to be as it is, the white rectangle has to be white and holes (black circles now) have to be transparent holes in the rectangle. 

[Ian]

Do you mean like this... http://codepen.io/anon/pen/yyQeEZ ?

[GeMir]

Yes! So simple. Thank you!