Invert mask with 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);

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?

回答1:

I found the solution.

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

来源：https://stackoverflow.com/questions/30385990/invert-mask-with-svg-js