使用 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

对于面具，白色表示实心，黑色表示透明。所以要制作一个具有孔洞效果的蒙版，需要用白色填充（你可以使用矩形）并将孔洞设为黑色。

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

An SVG rectangle with multiple holes using Snap.svg

javascript

svg

mask

snap.svg