Snapsvg使用蒙版在矩形中创建孔

Question

是否可以在 Snapsvg 的矩形元素中创建例如圆形孔？我尝试使用白色和黑色元素和遮罩功能，但我无法弄清楚。大多数结果是倒置的（我只看到带有矩形颜色的圆圈）或根本没有效果。搜索谷歌也无济于事——我发现的唯一相关的东西是that，但是当我尝试使用 Snapsvg 复制它时，它并没有像我之前尝试描述的那样好用（我必须承认，我不完全确定它是否是我的错还是因为 snapsvg 掩码处理）。

它非常重要，它将是使用矩形的简单解决方案，而不是使用路径或类似事物的东西。

我试图实现的目标类似于游戏制作者表面 - 带有孔（光）的黑暗前景，我可以看到背景。

我也在寻找可以处理元素中多个圆孔和动态位置变化的解决方案。

感谢任何答案，我希望这是可能的。

PS：对不起我的英语，我不是来自英语国家

Answer 1

给你。我已经松散地重新创建了您的图像。我制作了一个黑色矩形，上面有一个洞，你可以通过它看到绿色背景。

var s = Snap("#svg");

// Make a green rectangle. Something for us to see through the mask.
var greenbg = s.rect(0,0, 400,300);
greenbg.attr({
    fill: "darkseagreen"
});

// Now create the mask.
// We want the mask to be a hole through a rectangle, so the mask
// needs to be a white (solid) rectangle with a black (hole) circle
// on top of it.
var maskrect = s.rect(0,0, 400,300);   // the rect
maskrect.attr({
    fill: "white"
});
var maskcircle = s.circle(140,130, 80);  // the circular hole
// Now group these two items to create the combined object that becomes the mask.
spotlightmask = s.group(maskrect, maskcircle);

// Add a black foreground rectangle that we will apply the mask to.
var blackfg = s.rect(0,0, 400,300);
// Attch the mask to the black foreground rect.
blackfg.attr({
    mask: spotlightmask
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" width="500" height="500"></svg>