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

LittleLiByte 發布于2019-08-01 16:35 / 2569人閱讀

摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創建紅色前景和藍色背景在中使用蒙版需要在使用前在中定義并為其設置一個唯一，然后在需要應用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應用到彩色圖層上就會產生透明度的漸變。

蒙版工作原理

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

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

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

基本用法：顯示與隱藏

還是以上面Photoshop中的圖為例子，我們用SVG來一步一步地創建一個這樣的圖形。

先創建紅色前景和藍色背景

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

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

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

進階用法：透明度漸變

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

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

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

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

總結與討論

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

GPU云服務器云服務器巧用CSS的MASK濾鏡 linux的使用教程 java的使用教程服務器的使用教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50612.html

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

摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創建紅色前景和藍色背景在中使用蒙版需要在使用前在中定義并為其設置一個唯一，然后在需要應用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應用到彩色圖層上就會產生透明度的漸變。蒙版工作原理設計師或者會用Sketch、Photoshop一類設計工具的朋友應該都了解蒙版(mask)這個東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...

Pines_Cheng 2019-08-29 12:19 評論0 收藏0
SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0
CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0
透明背景情況下遮罩出不規則圖片

摘要：使用透明蒙版等在四個角畫三角形來遮罩出六邊形我們來一一試驗使用透明蒙版如果純色背景還可以，但是背景要求透明的，所以第一種看樣子不大可能了。我們在處理圖片，比如用戶頭像的時候，通常上傳的都是矩形圖片例如：showImg(https://segmentfault.com/img/bVkHOG); 有時候根據設計師的需求，會要求是圓形或者帶圓角，這時候我們通常使用css border-...

rozbo 2019-08-28 18:05 評論0 收藏0
mask-image的應用

摘要：大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。利用能做出一些不錯的效果，比如。想到用這個屬性正合適，于是要來了心型圖片，拿到設計師導出的文件，用壓縮下得到一個。遮罩層，如果學過Flash的同學應該都聽過，跟PS的剪切蒙版差不多。大概的效果就是被遮罩層與遮罩層不透明的部分重疊的部分是可見的，而遮罩層是不顯示的。類似于現實世界中一張A4卡紙剪了個洞，我...

HollisChuang 2019-08-30 11:19 評論0 收藏0