The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.
<mask>
Example
<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 the coordinate system for attributes
x,y,widthandheighton 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 elements Descriptive elements Shape elements Structural elements Gradient elements <a>, <altGlyphDef>, <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
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
mask |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
height |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
maskContentUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
maskUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
width |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
x |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
y |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
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
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask