SVG蒙版功能可將蒙版應用於SVG形狀。蒙版可確定SVG形狀的哪些部分可見，以及具有什么透明度。運行效果可以將SVG蒙版視為剪切路徑的更高級版本。
一、簡單的蒙版
代碼解析：
本示例使用ID=mask1定義一個蒙版。
定義了一個使用mask的
例：
<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形狀作為蒙版。
使用圓圈作為蒙版。
<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）的矩形組成。蒙版用於單個矩形，因此運行效果可以使用蒙版查看蒙版中的兩個不同形狀如何影響相同形狀。
<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: #FF0000; mask: url(#mask4)" />
</svg>
運行效果：
注：漸變蒙版可以與其他效果（例如填充圖案）結合使用。
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: #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蒙版。
五、在蒙版中使用填充圖案
也可以在蒙版中使用填充圖案，從而使蒙版成為填充圖案的形狀。
例：
<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>
運行效果
注：矩形現在是半透明的，其中填充圖案繪制了圓圈，而在其他位置完全透明。
六、總結
本文基於HTML基礎，介紹了SVG中蒙版的應用。定義不同形狀的蒙版，設置蒙版的不透明度，蒙版中使用漸變，以及蒙版應用填充圖案。都通過項目，進行詳細的講解。
希望能夠幫助你更好的學習。
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/