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

LittleLiByte 發(fā)布于2019-08-01 16:35 / 2579人閱讀

摘要：接下來(lái)我先以為例，簡(jiǎn)單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍(lán)色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個(gè)唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會(huì)產(chǎn)生透明度的漸變。

蒙版工作原理

設(shè)計(jì)師或者會(huì)用Sketch、Photoshop一類(lèi)設(shè)計(jì)工具的朋友應(yīng)該都了解蒙版(mask)這個(gè)東西。接下來(lái)我先以Photoshop為例，簡(jiǎn)單解釋蒙版的工作原理。

上圖中我創(chuàng)建了兩個(gè)圖層——藍(lán)色的背景和紅色的前景，并且在紅色前景上應(yīng)用了一個(gè)蒙版（右邊紅圈）。正常情況下紅色前景應(yīng)該完全遮蓋住藍(lán)色背景，但是請(qǐng)注意紅圈中的蒙版，我在這個(gè)蒙版上畫(huà)了一個(gè)黑色的矩形。

蒙版中黑色代表不可見(jiàn)（opacity: 0），白色代表可見(jiàn)（opacity: 100%），將蒙版對(duì)應(yīng)到紅色圖層后就很容易理解：黑色矩形在紅色圖層上對(duì)應(yīng)的區(qū)域變成了不可見(jiàn)，所以下層的藍(lán)色會(huì)顯示出來(lái)。

基本用法：顯示與隱藏

還是以上面Photoshop中的圖為例子，我們用SVG來(lái)一步一步地創(chuàng)建一個(gè)這樣的圖形。

先創(chuàng)建紅色前景和藍(lán)色背景

在SVG中使用蒙版需要在使用前在中定義并為其設(shè)置一個(gè)唯一id，然后在需要應(yīng)用蒙版的元素上添加一條屬性mask="url(#id)"。

光有了蒙版沒(méi)有用，我們還需要在蒙版中添加圖形元素并指定黑白顏色。

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

進(jìn)階用法：透明度漸變

之前在講蒙版原理的時(shí)候說(shuō)到：

黑色代表不可見(jiàn)（opacity: 0），白色代表可見(jiàn)（opacity: 100%）。

那么黑白之間的灰色代表什么呢？聰明的同學(xué)已經(jīng)想到了，從0%到100%是一個(gè)線(xiàn)性的變化，所以黑白中間的灰色會(huì)是半透明，而且不同灰度代表不同程度的半透明，越趨近白色可見(jiàn)度越高。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會(huì)產(chǎn)生透明度的漸變。

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

總結(jié)與討論

掌握上述兩種用法基本上就足夠應(yīng)對(duì)日常需求了，但是還有另外幾個(gè)專(zhuān)有屬性maskUnits, maskContentUnits, x, y, width, height我現(xiàn)在完全搞不懂該怎么用，希望有所了解的朋友不吝指教。