mask-type
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.
css
/* Keyword values */
mask-type: luminance;
mask-type: alpha;
/* Global values */
mask-type: inherit;
mask-type: initial;
mask-type: revert;
mask-type: revert-layer;
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
mask-type =
luminance |
alpha
Examples
Setting an alpha mask
HTML
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
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
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
css
.redsquare {
height: 100px;
width: 100px;
background-color: rgb(128, 128, 128);
border: solid 1px black;
mask: url("#m");
}
Result
Specifications
Specification |
---|
CSS Masking Module Level 1 # the-mask-type |
Browser compatibility
BCD tables only load in the browser