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.

<svg viewBox="0 0 200 100" xmlns="">
  <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" />

  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"

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


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

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
maskChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Compatibility unknown  
Compatibility unknown