使用Snap.svg的具有多个孔的SVG矩形 [英] 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});

我正在使用Snap.svg 0.3.0。

I'm using Snap.svg 0.3.0.

...

解决方案很简单（找到这里）： http：// codepen。 io / anon / pen / yyQeEZ

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

推荐答案

对于面具，白色表示实心，黑色表示透明。因此，要制作一个能够产生孔洞效果的面具，需要用白色填充（你可以使用矩形）并使孔变黑。

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.

这篇关于使用Snap.svg的具有多个孔的SVG矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！