mask-type

Themask-type attribute indicates which mask mode,alpha orluminance, to use for the contents of the<mask> element when masking.

You can use this attribute with the following SVG elements:

<mask>

Note:This presentation attribute has a CSS property counterpart:mask-type. When both are specified, the CSS property takes priority.

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <!-- Two identical masks other than the id and mask-type values -->  <mask mask-type="alpha">    <rect      fill="rgb(10% 10% 10% / 0.4)"      x="0"      y="0"      width="100%"      height="100%" />    <circle fill="rgb(90% 90% 90% / 0.6)" cx="50" cy="50" r="35" />  </mask>  <mask mask-type="luminance">    <rect      fill="rgb(10% 10% 10% / 0.4)"      x="0"      y="0"      width="100%"      height="100%" />    <circle fill="rgb(90% 90% 90% / 0.6)" cx="50" cy="50" r="35" />  </mask>  <!-- The first rect is masked with an alpha mask -->  <rect x="0" y="0" width="45" height="45" mask="url(#myMask1)" fill="red" />  <!-- The last rect is masked with a luminance mask -->  <rect x="55" y="0" width="45" height="45" mask="url(#myMask2)" fill="red" /></svg>

mask

For<mask>, themask-type defines whether the content of the mask element is treated as a luminance mask or an alpha mask.

Value	`alpha` \|`luminance`
Default value	`luminance`
Animatable	Discrete

alpha: This value indicates that the<mask> element's alpha values should be used; the pixels of the masked object match the opaqueness of the mask areas, without regard to the luminance of the colors of the mask.
luminance: This value indicates that the<mask> element's luminance values should be used; the opaqueness of the masked object depends on the opacity and lightness of the mask. The opacity of aluminance mask is determined by theR,G,B, andA channels of the mask, using the equation((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A.