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