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>测试看看?/?
运行后图像效果。请注意，矩形现在是半透明的，其中填充图案绘制了圆圈，而在其他位置完全透明。