mask

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.

You can use this attribute with the following SVG elements:

Example

<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.

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 WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
mask
?
?
?
?
?
?
?
?
?
?
?
?

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/mask