使用 svg.js 反转蒙版

Question

我开始在一个项目中使用 svg.js，当我玩蒙版时，我无法反转它们。

我画了一个矩形和一个圆形，使用圆形作为矩形的遮罩，仅显示遮罩内的矩形部分。

var leftRect = draw.rect(300, 200);
var maskTest = draw.circle(100);

leftRect.attr({
    x: 100,
    y: 100,
    fill: '#FF64F9'
});

maskTest.transform({
    x: 150,
    y: 150
});

leftRect.clipWith(maskTest);

现在我想要相反的，我想屏蔽以显示不在其中的任何内容。有没有办法用 svg.js 或 Snap.svg 做到这一点？

Answer 1

我找到了解决方案。

我正在创建一个包含一个黑色对象和一个白色对象的组。

使用该组作为遮罩，黑色部分将被隐藏，而白色部分将被显示。

var maskTest = draw.circle(100).fill("#000");
var maskRect = draw.rect(200, 100).fill("#fff");
var group = draw.group();
group.add(maskRect);
group.add(maskTest);

maskTest.transform({
    x: 100,
    y: 150
});
maskRect.transform({
    x: 150,
    y: 150
});

leftRect.maskWith(group);