Clipping

Clipping elements works exactly the same as masking elements. The only difference is that clipped elements will adopt the geometry of the clipping element. Therefore events are only triggered when entering the clipping element whereas with masks the masked element triggers the event. Another difference is that masks can define opacity with their fill color and clipPaths don't.

clipWith()

returns itself

var ellipse = draw.ellipse(80, 40).move(10, 10)

rect.clipWith(ellipse)

clip()

returns SVG.ClipPath

Clip multiple elements:

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

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

rect.clipWith(clip)

unclip()

returns itself

Unclipping the elements can be done with the unclip() method:

rect.unclip()

remove()

returns itself

Removing the clip alltogether will also unclip() all clipped elements as well:

clip.remove()

clipper

returns SVG.ClipPath

For your convenience, the clipping element is also referenced in the clipped element. This can be useful in case you want to change the clipPath:

rect.clipper.move(10, 10)
Fork me on GitHub