<!DOCTYPE html>
<html>
<head>
<style>
.redsquare {
height: 100px;
width: 100px;
background-color: red;
border: solid 1px black;
mask: url("#mask1");
}
.redsquare2 {
height: 100px;
width: 100px;
background-color: red;
border: solid 1px black;
mask: url("#mask2");
}
</style>
</head>
<body>
<h1>The mask-type Property</h1>
<h3>Let the SVG mask element be treated as an alpha mask:</h3>
<div class="redsquare"></div>
<h3>Let the SVG mask element be treated as a luminance mask:</h3>
<div class="redsquare2"></div>
<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
<rect width="10" height="10" fill="red" fill-opacity="0.7" />
</mask>
<mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
<rect width="10" height="10" fill="red" fill-opacity="0.7" />
</mask>
</defs>