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

Question

是否可以在 Snapsvg 中的矩形元素中创建例如圆孔？我尝试使用白色和黑色元素以及 mask 功能，但我无法弄清楚。大多数结果是倒置的(我只看到带有矩形颜色的圆圈)或根本没有效果。搜索谷歌也没有帮助 - 我发现的唯一相关的东西是 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>