编辑这个页面须要登录或更高权限！

SVG 蒙版(Mask)

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

蒙版的实例

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

<svg width="500" height="120">
<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)"/>
  </svg>
测试看看‹/›

本示例使用ID=mask1定义一个蒙版。 在<mask>元素内部是一个<rect>元素。 正是此<rect>元素定义了蒙版的形状。

该示例还定义了一个使用mask的<rect>元素。  <rect>元素使用CSS style属性mask内部引用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）的矩形组成。蒙版用于单个矩形，因此您可以使用蒙版查看蒙版中的两个不同形状如何影响相同形状。

<svg width="500" height="120">
<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;">
    此文本在矩形下方
</text>

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

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

运行后图像效果：

此文本在矩形下方

在蒙版中使用渐变

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

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

<svg width="500" height="120">
<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;">
    此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>
  </svg>
测试看看‹/›

运行后图像效果：

此文本在矩形下方

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

<svg width="500" height="120">
<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;">
    此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
      style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
  </svg>
测试看看‹/›

请注意，要显示的矩形如何引用其CSS属性中的fill填充图案，以及如何引用其CSS属性中的mask蒙版。

运行后图像效果。

此文本在矩形下方

在蒙版中使用填充图案

您也可以在蒙版中使用填充图案，从而使蒙版成为填充图案的形状。这是一个实例：

<svg width="500" height="120">
<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;">
    此文本在矩形下方
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
  </svg>
测试看看‹/›

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

此文本在矩形下方
SVG <filter> 滤镜SVG <clippath>剪切路径