​x
 
<!DOCTYPE html>
<html>
<head>
<style>
.redsquare {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#mask1"); /* 使用 SVG 遮罩 */
}
​
.redsquare2 {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#mask2"); /* 使用 SVG 遮罩 */
}
​
</style>
</head>
<body>
​
<h1>mask-type 属性</h1>
​
<h3>将 SVG 遮罩元素视为 Alpha 遮罩：</h3>
<div class="redsquare"></div>
​
<h3>将 SVG 遮罩元素视为亮度遮罩：</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>
</svg>
​
</body>
</html>
​