SVG蒙版(mask)的基礎使用教程

蒙版工做原理

設計師或者會用Sketch、Photoshop一類設計工具的朋友應該都瞭解蒙版(mask)這個東西。接下來我先以Photoshop爲例，簡單解釋蒙版的工做原理。

上圖中我建立了兩個圖層——藍色的背景和紅色的前景，而且在紅色前景上應用了一個蒙版（右邊紅圈）。正常狀況下紅色前景應該徹底遮蓋住藍色背景，可是請注意紅圈中的蒙版，我在這個蒙版上畫了一個黑色的矩形。

蒙版中黑色表明不可見（opacity: 0），白色表明可見（opacity: 100%），將蒙版對應到紅色圖層後就很容易理解：黑色矩形在紅色圖層上對應的區域變成了不可見，因此下層的藍色會顯示出來。

基本用法：顯示與隱藏

仍是以上面Photoshop中的圖爲例子，咱們用SVG來一步一步地建立一個這樣的圖形。

1. 先建立紅色前景和藍色背景

   <svg width="400" height="300">
     <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect>
     <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db"></rect> 
   </svg>

2. 在SVG中使用蒙版須要在使用前在<defs>中定義<mask>併爲其設置一個惟一id，而後在須要應用蒙版的元素上添加一條屬性mask="url(#id)"。

   <svg width="400" height="300">
     <defs>
        <mask id="opacity"></mask> 
     </defs>
     <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect> 
     <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db"
     mask="url(#opacity)"></rect> 
   </svg>

3. 光有了蒙版沒有用，咱們還須要在蒙版中添加圖形元素並指定黑白顏色。

   <svg width="400" height="300">
     <defs>
         <mask id="small-rect">
             <rect x="0" y="0" width="400" height="300" fill="white"></rect>
             <rect width="100" height="100" fill="black" x="200" y="100"></rect>
         </mask>
     </defs>
     <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect>
     <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db" mask="url(#small-rect)"></rect>
   </svg>

   至此一個基本的蒙版就完成了，https://codepen.io/LuXuanqing...

進階用法：透明度漸變

以前在講蒙版原理的時候說到：

黑色表明不可見（opacity: 0），白色表明可見（opacity: 100%）。

那麼黑白之間的灰色表明什麼呢？ 聰明的同窗已經想到了，從0%到100%是一個線性的變化，因此黑白中間的灰色會是半透明，並且不一樣灰度表明不一樣程度的半透明，越趨近白色可見度越高。在蒙版中的黑白漸變，應用到彩色圖層上就會產生透明度的漸變。

<svg width="400" height="300">
    <defs>
        <linearGradient id='white2black'>
            <stop offset="0" stop-color="white"></stop>
            <stop offset="100%" stop-color="black"></stop>
        </linearGradient>
        <mask id="small-rect">
            <rect x="0" y="0" width="400" height="300" fill="url(#white2black)"></rect>
        </mask>
    </defs>
    <rect id="back" x="0" y="0" width="400" height="300" fill="#d4fcff"></rect>
    <rect id="front" x="0" y="0" width="400" height="300" fill="#fcd3db" mask="url(#small-rect)"></rect>
</svg>

https://codepen.io/LuXuanqing...

總結與討論

掌握上述兩種用法基本上就足夠應對平常需求了，可是<mask>還有另外幾個專有屬性maskUnits, maskContentUnits, x, y, width, height我如今徹底搞不懂該怎麼用，但願有所瞭解的朋友不吝指教。