一篇文章带你了解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源创计划”，欢迎正在阅读的你也加入，一块儿分享。