mask - SVG: Scalable Vector Graphics

The mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to.

Note: As a presentation attribute mask can be used as a CSS property.

html,body,svg { height:100% }

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect    fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!--
  Punch a hole in a shape of a star inside the red circle,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red"
          mask="url(#myMask)"/>
</svg>

Since SVG2, the mask attribute is defined as a css property and is a shorthand for many other properties: mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite.

As a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use>

Usage notes

Value	See the CSS property `mask`
Default value	`none`
Animatable	Yes

Specifications

Specification	Status	Comment
CSS Masking Module Level 1 The definition of 'mask' in that specification.	Candidate Recommendation	Extends its usage to HTML elements. Extends its syntax by making it a shorthand for the new `mask-*` properties defined in that specification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'mask' in that specification.	Recommendation	Initial definition

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`mask`	Chrome ?	Edge ?	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android ?	Chrome Android ?	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android ?

Legend

Compatibility unknown: Compatibility unknown