使用 svg.js 反转掩码答案

【问题标题】：Invert mask with svg.js使用 svg.js 反转掩码
【发布时间】：2015-08-03 20:15:57
【问题描述】：

我开始在一个项目中使用 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 做到这一点？

【问题讨论】：

标签： javascript svg snap.svg svg.js

【解决方案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);

【讨论】：