SVG蒙版功能可將蒙版應(yīng)用于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>元素內(nèi)部是一個<rect>元素。 正是此<rect>元素定義了蒙版的形狀。
該示例還定義了一個使用mask的<rect>元素。 <rect>元素使用CSS style屬性mask內(nèi)部引用mask ID屬性。
運(yùn)行后圖像效果：
請注意，要顯示的矩形的高度為100像素，但垂直的前50個像素是可見的。那是因?yàn)槊砂婢匦沃挥?0個像素高。矩形僅在蒙版矩形所覆蓋的部分中可見。
黑色輪廓矩形是沒有蒙版的矩形的大小。
您可以使用任何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>測試看看?/?
運(yùn)行后圖像效果：
再次注意，僅在可見蒙版圓的地方可見引用蒙版的矩形。
到目前為止，蒙版形狀（圓形或矩形）的填充顏色設(shè)置為#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>測試看看?/?
該示例還包含一個位于矩形下方的文本，該文本僅可通過該矩形的半透明蒙版部分看到。
運(yùn)行后圖像效果：
如果對用作蒙版的形狀應(yīng)用漸變，則可以實(shí)現(xiàn)蒙版所應(yīng)用的形狀的漸變透明度。
這是一個定義漸變的示例，使用漸變的蒙版，使用蒙版的矩形以及該矩形下的文本，因此您可以看到其透明度如何隨著蒙版的漸變而變化：
<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>測試看看?/?
運(yùn)行后圖像效果：
漸變蒙版可以與其他效果（例如填充圖案）結(jié)合使用。這是一個示例，其中可見矩形使用填充圖案作為填充，并在其蒙版中使用漸變：
<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蒙版。
運(yùn)行后圖像效果。
您也可以在蒙版中使用填充圖案，從而使蒙版成為填充圖案的形狀。這是一個實(shí)例：
<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>測試看看?/?
運(yùn)行后圖像效果。請注意，矩形現(xiàn)在是半透明的，其中填充圖案繪制了圓圈，而在其他位置完全透明。