"<mask>"

Defines a mask, which is used to apply image-based visibility to graphical elements.

Compared to "<clipPath>", which requires the contents to be paths, "<mask>" masking is performed based on the white and black values of the mask contents.

• DOM object: SVGMaskElement
• SVG2 spec: https://drafts.fxtf.org/css-masking-1/#MaskElement

These elements are typically placed within a <defs> element, and then referenced by id from a mask attribute.

Example usage:

<mask id="MyMask">
 <!-- Things under a white pixel will be drawn -->
 <rect x="0" y="0" width="100" height="100" fill="white" />
 
 <!-- Things under a black pixel will be invisible -->
 <circle cx="50" cy="50" r="40" fill="black" />
</mask>

To reference it with the mask attribute:

<rect mask="url(#MyMask)" width="100" height="100" fill="green" />

This draws a green rectangle with a circle cut out of the middle of it.