mask-type property
Author admin Reading 1 min Views 388 Published by Modified by
Definition and Usage
The CSS mask-type properties defines if a SVG <mask> element is a luminance or an alpha mask.
- Initial
luminance - Applies to<mask>
- Inheritedno
- Mediavisual
- Computed valuethe unique non-ambiguous order defined by the formal grammar
- Animatableno
Syntax
mask-type: luminance | alpha
Values
luminance- Is a keyword indicating that the associated <mask> 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> is an alpha mask, that is that its alpha channel values must be used when applying it.
Examples
Let’s apply the following rectangle as a mask:
1 | <rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7" /> |
2 | <rect x="10" y="10" width="80" height="80" fill="red" fill-opacity="0.7"/> |
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
| Basic support | 24.0 | 20.0 (20.0) | Not supported | 15.0 | Not supported |
Mobile browsers
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
| Basic support | NA | 20.0 (20.0) | Not supported | 15.0 | Not supported |
