The CSS mask-type
property defines if a mask defined by an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element. It 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.
/* Keyword values */ mask-type: luminance; mask-type: alpha; /* Global values */ mask-type: inherit; mask-type: initial; mask-type: unset;
Initial value | luminance |
---|---|
Applies to | <mask> elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Syntax
One or more of the keyword values listed below, separated by commas.
Values
luminance
- Is a keyword indicating that the associated mask image is a luminance mask, that is 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, that is that its alpha channel values must be used when applying it.
Formal syntax
luminance | alpha
Examples
Let's apply the following rectangle as a mask:
<rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7" />
mask
<svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7"/> </svg>
to this box:
box
.redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; }
<div class="redsquare"></div>
The result, if your browser supports the property, with different value of mask-type
applied to the <mask>
element are these two different squares:
mask-type: alpha; |
mask-type: luminance; |
<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"); } |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Module Level 1 The definition of 'mask-type' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 24 | ? | 35 20 — 521 | ? | ? | ? |
Applies to HTML elements | No | ? | 20 | No | No | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 35 20 — 521 | ? | ? | ? |
Applies to HTML elements | ? | ? | ? | 20 | ? | ? | ? |
1. From version 20 until version 52 (exclusive): this feature is behind the layout.css.masking.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
See also
- Other mask-related properties:
mask