/* Keyword values */ mask-type: luminance; mask-type: alpha;  /* Global values */ mask-type: inherit; mask-type: initial; mask-type: revert; mask-type: unset; 

mask-type

The mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.

/* Keyword values */ mask-type: luminance; mask-type: alpha;  /* Global values */ mask-type: inherit; mask-type: initial; mask-type: revert; mask-type: unset; 

This property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.

Syntax

The mask-type property is specified as one of the keyword values listed below.

Values

Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its relative luminance values must be used when applying it.

Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its alpha channel values must be used when applying it.

Formal definition

Formal syntax

luminance | alpha

Examples

Setting an alpha mask

<div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">   <defs>     <mask id="m" maskContentUnits="objectBoundingBox"       style="mask-type:alpha">       <rect x=".1" y=".1" width=".8" height=".8"           fill="red" fill-opacity="0.7"/>     </mask>   </defs> </svg> 

.redsquare {   height: 100px;   width: 100px;   background-color: rgb(128, 128, 128);   border: solid 1px black;   mask: url("#m"); } 

Setting a luminance mask

<div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">   <defs>     <mask id="m" maskContentUnits="objectBoundingBox"       style="mask-type:luminance">       <rect x=".1" y=".1" width=".8" height=".8"           fill="red" fill-opacity="0.7"/>     </mask>   </defs> </svg> 

.redsquare {   height: 100px;   width: 100px;   background-color: rgb(128, 128, 128);   border: solid 1px black;   mask: url("#m"); } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors