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: 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
luminance
- 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.
alpha
- 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
Initial value | luminance |
---|---|
Applies to | <mask> elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
luminance | alpha
Examples
Setting an alpha mask
HTML
<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>
CSS
.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); }
Result
Setting a luminance mask
HTML
<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>
CSS
.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-type' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mask-type | Chrome Full support 24 | Edge Full support 79 | Firefox
Full support
35
| IE No support No | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox Android
Full support
35
| Opera Android Full support 14 | Safari iOS Full support 7 | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.