使用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>测试看看 ‹/›
运行后效果如下: