<mask>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The<mask>SVG element defines a mask for compositing the current object into the background. A mask is used/referenced using themask property and CSSmask-image property.

Usage context

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>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`

Attributes

height: This attribute defines the height of the masking area.Value type:<length>;Default value:120%;Animatable:yes
mask-type: This attribute defines the mask mode for the contents for the contents of the<mask>.Value type:alpha |luminance;Default value:luminance;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 attributesx,y,width andheight 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

DOM Interface

This element implements theSVGMaskElement interface.

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 mask-type="luminance">    <!-- 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>