一篇文章带你了解SVG 蒙版(Mask)

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

一、简单的蒙版

代码解析：

本示例使用ID=mask1定义一个蒙版。

<mask>元素内部是一个<rect>元素。<rect>元素定义了蒙版的形状。

定义了一个使用mask的<rect>元素，<rect>元素使用CSS style属性mask内部引用mask ID属性。

例：

代码语言：javascript复制

<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>

注：

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

黑色轮廓矩形是没有蒙版的矩形的大小。

二、其他形状的蒙版

可以使用任何SVG形状作为蒙版。

使用圆圈作为蒙版。

代码语言：javascript复制

<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>

运行效果：

注：仅在可见蒙版圆的地方可见引用蒙版的矩形。

三、蒙版形状颜色定义蒙版不透明度

1. 如何去定义不透明度？

蒙版形状（圆形或矩形）的填充颜色设置为#ffffff。

蒙版形状的颜色定义使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff（白色），使用蒙版的形状将越不透明。蒙版形状的颜色越接近#000000（黑色），使用蒙版的形状将越透明。

2. 案例

其中蒙版由两个具有不同颜色（#ffffff和#66666）的矩形组成。蒙版用于单个矩形，因此运行效果可以使用蒙版查看蒙版中的两个不同形状如何影响相同形状。

代码语言：javascript复制

<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>

运行效果：

四、在蒙版中使用渐变

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

使用渐变的蒙版，使用蒙版的矩形以及该矩形下的文本，因此可以看到其透明度如何随着蒙版的渐变而变化。

例：

代码语言：javascript复制

<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: #FF0000; mask: url(#mask4)" />
</svg>

运行效果：

注：渐变蒙版可以与其他效果（例如填充图案）结合使用。

SVG代码：

代码语言：javascript复制

<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: #FF0000; " />

 </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蒙版。

五、在蒙版中使用填充图案

也可以在蒙版中使用填充图案，从而使蒙版成为填充图案的形状。

例：

代码语言：javascript复制

<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: #FF0000; mask: url(#mask5)"/>
 </svg>

运行效果