mask-type
mask-type
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.
| Initial value | luminance |
|---|---|
| Applies to |
<mask> elements |
| Inherited | no |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword values */ mask-type: luminance; mask-type: alpha; /* Global values */ mask-type: inherit; mask-type: initial; mask-type: unset;
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" /> to this box:
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; |
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support (for SVG) | 24.0 | 35.0 (35.0)[1] | No support | 15.0 | 7 |
| Applies to HTML elements | No support | 35.0 (35.0)[1] | No support | No support | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support (for SVG) | ? | 35.0 (35.0)[1] | No support | 15.0 | No support |
| Applies to HTML elements | ? | ? | ? | ? | ? |
[1] Available since Gecko 20 (Firefox 20.0 / Thunderbird 20.0 / SeaMonkey 2.17) behind the preference layout.css.masking.enabled, defaulting to false. That preference was removed in Gecko 52 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) (see bug 1308239).
See also
- Other mask-related properties:
mask
© 2005–2017 Mozilla Developer Network 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
