使用 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);

使用 svg.js 反转掩码

Invert mask with svg.js

javascript

svg

snap.svg

svg.js