SVG遮罩函数使将遮罩应用于SVG形状成为可能。遮罩确定SVG形状的哪些部分可见，以及具有什么透明度。我们可以将SVG蒙版视为剪切路径的更高级版本。

遮罩示例

这是一个简单的蒙版示例：

<defs>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="0" width="100" height="50"
        style="stroke:none; fill: #ffffff"/>
  </mask>
</defs>

<rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>

本示例定义了一个ID为" mask1"的掩码。在<mask>元素内部是一个<rect>元素。正是这个<rect>元素定义了蒙版的形状。

该示例还定义了一个使用掩码的 <rect>元素。 " <rect>"元素使用" mask" CSS属性从其" style"属性内部引用mask ID属性。

请注意，要显示的矩形的高度为100像素，但垂直的前50个像素是可见的。那是因为遮罩矩形只有50个像素高。矩形仅在蒙版矩形所覆盖的部分中可见。

黑色轮廓矩形是没有遮罩的矩形的大小。

其他形状的遮罩

我们可以使用任何SVG形状作为蒙版。这是一个使用圆圈作为蒙版的示例：

<svg>
  <defs>
    <mask id="mask2" x="0" y="0" width="100" height="100" >
      <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
    </mask>
  </defs>

  <rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>

</svg>

再次注意，仅在可见遮罩圆的情况下，参考遮罩的矩形才可见。

遮罩形状的颜色定义了遮罩的不透明度

到目前为止，遮罩形状(圆形或者矩形)的填充颜色设置为" #ffffff"。遮罩形状的颜色定义使用遮罩的形状的不透明度。遮罩形状的颜色越接近" #ffffff"(白色)，使用遮罩的形状将越不透明。遮罩形状的颜色越接近"#000000"(黑色)，使用遮罩的形状越透明。

这是一个示例，其中遮罩由两个具有不同颜色的矩形组成(#ffffff和#66666)。遮罩用于单个矩形上，因此我们可以使用遮罩查看遮罩中的两个不同形状如何影响相同的形状。

<defs>
  <mask id="mask3" x="0" y="0" width="100" height="100" >

    <rect x="0" y="0"  width="100" height="50"
          style="stroke:none; fill: #ffffff"/>

    <rect x="0" y="50" width="100" height="50"
          style="stroke:none; fill: #666666"/>
  </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
    This text is under the rectangle
</text>

<rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>

该示例还包含一个位于矩形下方的文本，该文本仅可通过矩形为半透明蒙版的矩形部分看到。

此文字在矩形下方

在蒙版中使用渐变

如果对用作蒙版的形状应用渐变，则可以实现蒙版所应用的形状的渐变透明度。

这是一个定义渐变的示例，使用渐变的蒙版，使用蒙版的矩形以及该矩形下的文本，因此我们可以看到其透明度如何随着蒙版的渐变而变化：

<defs>
    <linearGradient id="gradient1"
                    x1="0%"   y1="0%"
                    x2="100%" y2="0%"
                    spreadMethod="pad">
        <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
        <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
    </linearGradient>

    <mask id="mask4" x="0" y="0" width="200" height="100" >
        <rect x="0" y="0"  width="200" height="100"
            style="stroke:none; fill: url(#gradient1)"/>
    </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
    This text is under the rectangle
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>

此文字在矩形下方

渐变蒙版可以与其他效果结合使用，例如填充模式。这是一个示例，其中可见矩形使用填充图案作为填充，并在其蒙版中使用渐变：

<defs>

  <linearGradient id="gradient2"
                x1="0%"   y1="0%"
                x2="100%" y2="0%"
                spreadMethod="pad">
    <stop offset="0%"   stop-color="#ffffff" stop-opacity="1"/>
    <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
  </linearGradient>

  <pattern id="pattern2"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse" >

    <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff; " />

  </pattern>

  <mask id="mask6" x="0" y="0" width="200" height="100" >
      <rect x="0" y="0"  width="200" height="100"
          style="stroke:none; fill: url(#gradient2)"/>
  </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
    This text is under the rectangle
</text>
<rect x="1" y="1" width="200" height="100"
      style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>

请注意，要显示的矩形是如何从其fillCSS属性引用填充模式的，以及如何从其maskCSS属性引用掩码的。

该文本位于矩形下方。我们也可以在蒙版中使用填充图案，从而使蒙版成为填充图案的形状。这是一个例子：

在遮罩中使用填充图案

请注意，矩形现在是半透明的，其中填充图案绘制了圆圈，而在其他位置完全透明。

<defs>
  <pattern id="pattern1"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse" >

      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
  </pattern>

  <mask id="mask5" x="0" y="0" width="200" height="100" >
    <rect x="0" y="0"  width="200" height="100"
        style="stroke:none; fill: url(#pattern1)"/>
  </mask>
</defs>

<text x="10" y="55" style="stroke: none; fill: #000000;">
    This text is under the rectangle
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>