Masking elements

maskWith()

returns itself

The easiest way to mask is to use a single element:

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })

rect.maskWith(ellipse)

mask()

returns SVG.Mask

But you can also use multiple elements:

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 }).fill({ color: '#fff' })

var mask = draw.mask().add(text).add(ellipse)

rect.maskWith(mask)

If you want the masked object to be rendered at 100% you need to set the fill color of the masking object to white. But you might also want to use a gradient:

var gradient = draw.gradient('linear', function(stop) {
  stop.at({ offset: 0, color: '#000' })
  stop.at({ offset: 1, color: '#fff' })
})

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient })

rect.maskWith(ellipse)

unmask()

returns itself

Unmasking the elements can be done with the unmask() method:

rect.unmask()

The unmask() method returns the masking element.

remove()

returns itself

Removing the mask altogether will also unmask() all masked elements as well:

mask.remove()

masker

returns SVG.Mask

For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask:

rect.masker.fill('#fff')
Fork me on GitHub