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

Question

是否可以在 Snapsvg 中的矩形元素中创建例如圆孔？我尝试使用白色和黑色元素以及遮罩功能，但我无法弄清楚。大多数结果是倒置的（我只看到带有矩形颜色的圆圈）或根本没有效果。并且搜索 google 也无济于事 - 我发现的唯一相关内容是但是当我尝试使用 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>

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

Snapsvg create hole in rectangle using mask

javascript

svg

image-masking