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 rec

Solution 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");
vargroup = draw.group();
group.add(maskRect);
group.add(maskTest);

maskTest.transform({
    x: 100,
    y: 150
});
maskRect.transform({
    x: 150,
    y: 150
});

leftRect.maskWith(group);