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.
The mask-type
property is specified as one of the keyword values listed below.
luminance
alpha
Initial value | luminance |
---|---|
Applies to |
<mask> elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
luminance | alpha
<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"); }
<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"); mask-type:luminance; }
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-type' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
mask-type |
24 | 79 | 35
|
No | 15 | 6.1 |
Mobile | ||||||
---|---|---|---|---|---|---|
mask-type |
37 | 25 | 35
|
14 | 7 | 1.5 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type