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>