使用SVG mask 遮罩功能，可以将遮罩应用于SVG形状。SVG遮罩是剪切路径的更高级版本，用于确定SVG形状的哪些部分可见以及具有何种透明度。
在SVG中，你可以指一个透明的遮罩层和当前对象合成，形成背景。透明遮罩层可以是任何其他图形对象或者<g>元素。mask元素用于定义这样的遮罩元素。属性mask用来引用一个遮罩元素。
示例
生成一个蓝色矩形遮罩
示例
<svg height="450" width="450">
<defs>
<mask id="mask1" x="0" y="0" width="100" height="100" >
<rect x="0" y="0" width="100" height="100"
style="stroke:none; fill: #ffffff"/>
</mask>
</defs>
<rect x="1" y="1" width="200" height="200"
style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
</svg>运行后效果如下:
用法解释
<mask>元素的id属性定义了掩码的唯一名称。
<mask>的<rect>元素定义蒙版的形状。
<rect>元素的style属性使mask ID元素具有mask CSS属性。
更多示例
文本遮罩效果
示例
<svg width="200" height="80"
viewBox="0 0 200 80" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="myMask" maskUnits="userSpaceOnUse"
x="0" y="0" width="200" height="80">
<rect x="0" y="0" width="100" height="80" fill="white"/>
</mask>
<text id="Text" x="100" y="48"
font-size="26" font-weight="bold" text-anchor="middle">
Black & White
</text>
</defs>
<!-- 在背景上绘制黑色矩形 -->
<rect x="100" y="10" width="95" height="60"></rect>
<!-- 绘制文本字符串两次。首先，不带蒙版的白色文本。其次，应用蒙版的黑色文本-->
<use xlink:href="#Text" fill="white"/></use>
<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>运行后效果如下: