使用svg.js反转遮罩 [英] Invert mask with svg.js

问题描述

我开始在一个项目上使用svg.js，而且当我玩面具时，我无法设法将它们反转.

I'm starting to use svg.js on a project, and as I was playing with masks, I couldn't manage to invert them.

我绘制了一个矩形和一个圆，使用该圆作为矩形的遮罩，只显示了遮罩内部的矩形部分.

I drew a rectangle, and a circle, using the circle as a mask for the rectangle, only showing the part of the rectangle that's inside the mask.

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吗?

Now I want the opposite, I want to mask to display anything that is not inside it. Is there any way to do that with svg.js or Snap.svg?

推荐答案

我找到了解决方案.

我正在创建一个包含黑色对象和白色对象的组.

I'm creating a group containing a black object, and a white object.

使用该组作为遮罩，黑色部分将被隐藏，而白色部分将被显示.

Using the group as a mask, the black part will be hidden, while the white part will be displayed.

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反转遮罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！