使用SVG mask 遮罩功能，可以將遮罩應(yīng)用于SVG形狀。SVG遮罩是剪切路徑的更高級版本，用于確定SVG形狀的哪些部分可見以及具有何種透明度。
在SVG中，你可以指一個透明的遮罩層和當(dāng)前對象合成，形成背景。透明遮罩層可以是任何其他圖形對象或者<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> <!-- 繪制文本字符串兩次。首先，不帶蒙版的白色文本。其次，應(yīng)用蒙版的黑色文本--> <use xlink:href="#Text" fill="white"/></use> <use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use> </svg>測試看看 ?/?
運行后效果如下: