An SVG rectangle with multiple holes using Snap.svg

问题

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 shape in 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();  
group.append(s.rect(10,10,250,250).attr({ fill: 'white'}))

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.

…

The solution is simple (found here): http://codepen.io/anon/pen/yyQeEZ

回答1:

For masks, white means solid and black means transparent. So to make a mask that gives the effect of holes, it needs to be filled with white (you can use a rect for that) and make the holes black.

来源：https://stackoverflow.com/questions/29053731/an-svg-rectangle-with-multiple-holes-using-snap-svg