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