Инверсная маска с 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);