使用 Snap.svg 的带有多个孔的 SVG 矩形

Question

我试图得到一个带有许多（透明，不仅与背景颜色相同！）圆孔的矩形，但我的代码却相反。我知道为什么，但我不知道在这种情况下如何生成合适的蒙版形状：

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});

我正在使用 Snap.svg 0.3.0。

…

解决方法很简单（找到here）：http://codepen.io/anon/pen/yyQeEZ

Answer 1

对于蒙版，白色表示纯色，黑色表示透明。因此，要制作具有孔洞效果的蒙版，需要用白色填充（您可以使用矩形）并让孔洞变黑。