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

LittleLiByte 发布于2019-08-01 16:35 / 2513人阅读

摘要：接下来我先以为例，简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一，然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变。

蒙版工作原理

设计师或者会用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的使用教程服务器的使用教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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