带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);