一篇文章帶你瞭解SVG 蒙版(Mask)

點擊上方「 IT共享之家 」，進行關注

回覆「資料」便可獲贈Python、Java學習資料

今

日

雞

湯

君家何處住，妾住在橫塘。

SVG蒙版功能可將蒙版應用於SVG形狀。蒙版可肯定SVG形狀的哪些部分可見，以及具備什麼透明度。運行效果能夠將SVG蒙版視爲剪切路徑的更高級版本。

1、簡單的蒙版

代碼解析：

本示例使用ID=mask1定義一個蒙版。

<mask>元素內部是一個<rect>元素。<rect>元素定義了蒙版的形狀。

定義了一個使用mask的<rect>元素，<rect>元素使用CSS style屬性mask內部引用mask ID屬性。

例：

<svg width="500" height="120"><defs><mask id="mask1" x="0" y="0" width="100" height="100"><rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff" /></mask></defs><rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask1)" /></svg>

注：

要顯示的矩形的高度爲100像素，但垂直的前50個像素是可見的。那是由於蒙版矩形只有50個像素高。矩形僅在蒙版矩形所覆蓋的部分中可見。

黑色輪廓矩形是沒有蒙版的矩形的大小。

2、其餘形狀的蒙版

可使用任何SVG形狀做爲蒙版。

使用圓圈做爲蒙版。

<svg> <defs> <mask id="mask2" x="0" y="0" width="100" height="100" > <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/> </mask> </defs>
 <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>
</svg>

運行效果：

注：僅在可見蒙版圓的地方可見引用蒙版的矩形。

3、蒙版形狀顏色定義蒙版不透明度

1. 如何去定義不透明度 ？

蒙版形狀（圓形或矩形）的填充顏色設置爲#ffffff。

蒙版形狀的顏色定義使用蒙版的形狀的不透明度。蒙版形狀的顏色越接近#ffffff（白色），使用蒙版的形狀將越不透明。蒙版形狀的顏色越接近#000000（黑色），使用蒙版的形狀將越透明。

2. 案例

其中蒙版由兩個具備不一樣顏色（#ffffff和#66666）的矩形組成。蒙版用於單個矩形，所以運行效果可使用蒙版查看蒙版中的兩個不一樣形狀如何影響相同形狀。

<svg width="500" height="120"><defs> <mask id="mask3" x="0" y="0" width="100" height="100" >
 <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/>
 <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #666666"/> </mask></defs>
<text x="10" y="55" style="stroke: none; fill: #000000;"> 此文本在矩形下方</text>
<rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff; mask: url(#mask3)"/> </svg>

運行效果：

4、在蒙版中使用漸變

若是對用做蒙版的形狀應用漸變，則能夠實現蒙版所應用的形狀的漸變透明度。

使用漸變的蒙版，使用蒙版的矩形以及該矩形下的文本，所以能夠看到其透明度如何隨着蒙版的漸變而變化。

例：

<svg width="500" height="120"><defs><linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"><stop offset="0%" stop-color="#ffffff" stop-opacity="1" /><stop offset="100%" stop-color="#000000" stop-opacity="1" /></linearGradient>
<mask id="mask4" x="0" y="0" width="200" height="100"><rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient1)" /></mask></defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">此文本在矩形下方</text><rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #FF0000; mask: url(#mask4)" /></svg>

運行效果：

注：漸變蒙版能夠與其餘效果（例如填充圖案）結合使用。

SVG代碼：

<svg width="500" height="120"><defs>
 <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%" spreadMethod="pad"> <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> <stop offset="100%" stop-color="#000000" stop-opacity="1"/> </linearGradient>

 <pattern id="pattern2" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
 <circle cx="10" cy="10" r="10" style="stroke: none; fill: #FF0000; " />
 </pattern>
 <mask id="mask6" x="0" y="0" width="200" height="100" > <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#gradient2)"/> </mask></defs>
<text x="10" y="55" style="stroke: none; fill: #000000;"> 此文本在矩形下方</text><rect x="1" y="1" width="200" height="100" style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/> </svg>

運行效果：

注：其中可見矩形使用填充圖案做爲填充，並在其蒙版中使用漸變。

要顯示的矩形如何引用其CSS屬性中的fill填充圖案，以及如何引用其CSS屬性中的mask蒙版。

5、在蒙版中使用填充圖案

也能夠在蒙版中使用填充圖案，從而使蒙版成爲填充圖案的形狀。

例：

<svg width="500" height="120"><defs> <pattern id="pattern1" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse" >
 <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" /> </pattern>
 <mask id="mask5" x="0" y="0" width="200" height="100" > <rect x="0" y="0" width="200" height="100" style="stroke:none; fill: url(#pattern1)"/> </mask></defs>
<text x="10" y="55" style="stroke: none; fill: #000000;"> 此文本在矩形下方</text><rect x="1" y="1" width="200" height="100" style="stroke: none; fill: #FF0000; mask: url(#mask5)"/> </svg>

運行效果

注：矩形如今是半透明的，其中填充圖案繪製了圓圈，而在其餘位置徹底透明。

6、總結

本文基於HTML基礎，介紹了SVG中蒙版的應用。定義不一樣形狀的蒙版，設置蒙版的不透明度，蒙版中使用漸變，以及蒙版應用填充圖案。都經過項目，進行詳細的講解。

但願可以幫助你更好的學習。

------------------- End -------------------

往期精彩文章推薦：

• 一篇文章帶你瞭解CSS對齊方式
  

• 一篇文章帶你瞭解CSS3圖片邊框
  

• 一篇文章帶你瞭解CSS基礎知識和基本用法

本文分享自微信公衆號 - IT共享之家（info-share）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。