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

Example
-------
```

html,
body,
svg {
  height: 100%;
}
```



```html
<svg viewBox="-10 -10 120 120">
  <rect x="-10" y="-10" width="120" height="120" fill="blue" />
  <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" fill="purple" 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 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
-----------

|  |  |
| --- | --- |
| Categories | Container element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Specifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # MaskElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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`