蒙版(mask)是一種用于控制SVG元素可見性的技術。它通過將一個元素的可見部分與另一個元素進行組合來創建一個遮罩效果。蒙版通常由一個包含與被遮罩元素相同尺寸和位置的圖形元素和一個填充滿顏色的圖形組成。
蒙版元素有兩個核心屬性:maskUnits和maskContentUnits。maskUnits屬性定義了蒙版元素的坐標系,可以是用戶空間坐標系統(默認)或對象BoundingBox坐標系統。maskContentUnits屬性定義了蒙版元素圖形的坐標系統,與maskUnits屬性類似,默認也是用戶空間坐標系統。
蒙版的創建和使用包括以下步驟:
<mask>
標簽來創建,然后在其中添加圖形元素來定義蒙版的形狀。<mask id="myMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="50" fill="white" />
</mask>
mask
屬性來指定蒙版的ID。<rect x="0" y="0" width="100" height="100" fill="red" mask="url(#myMask)" />
在上面的例子中,一個蒙版元素被創建并定義為一個白色的圓形,然后這個蒙版被應用到一個紅色的矩形上。
蒙版元素的圖形可以是任意形狀,可以是一個單獨的形狀,也可以是多個形狀的組合。蒙版元素的圖形可以使用任意的SVG圖形元素來創建,如矩形、圓形、路徑等等。
蒙版還可以通過添加漸變效果、圖案或文本等來實現更加復雜的遮罩效果。可以使用<linearGradient>
和<radialGradient>
元素來創建漸變效果,使用<pattern>
元素來創建圖案,使用<text>
元素來添加文本。
總而言之,蒙版是一個強大的SVG技術,可以用于創建各種遮罩效果,從簡單的形狀遮罩到復雜的漸變遮罩和圖案遮罩。通過合理運用蒙版,可以實現各種獨特的視覺效果。