<mask>

The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.

html,body,svg { height:100% }

<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
 
  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>

Attributes

height

This attribute defines the height of the masking area.
Value type: <length> ; Default value: 120%; Animatable: yes

maskContentUnits

This attribute defines the coordinate system for the contents of the <mask>.
Value type: userSpaceOnUse|objectBoundingBox ; Default value: userSpaceOnUse; Animatable: yes

maskUnits

This attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>.
Value type: userSpaceOnUse|objectBoundingBox ; Default value: objectBoundingBox; Animatable: yes

x

This attribute defines the x-axis coordinate of the top-left corner of the masking area.
Value type: <coordinate> ; Default value: -10%; Animatable: yes

y

This attribute defines the y-axis coordinate of the top-left corner of the masking area.
Value type: <coordinate> ; Default value: -10%; Animatable: yes

width

This attribute defines the width of the masking area.
Value type: <length> ; Default value: 120%; Animatable: yes

Global attributes

Core Attributes

Most notably: id

Styling Attributes

class, style

Conditional Processing Attributes

Most notably: requiredExtensions, systemLanguage

Presentation Attributes

Most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

Usage notes

Specifications

Browser compatibility

See also

• Other clipping and masking SVG elements: <clipPath>
• Clipping and masking CSS properties: mask, mask-image,mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-composite, mask-size, pointer-events