SVG蒙版的使用

DesGemini 发布于2019-08-02 15:35 / 3045人阅读

摘要：蒙版需要引入图片，如果要引入图片那还不如直接叫把这每个进度的图给我算了，又觉得小题大做，所以这里使用蒙版。代码实现首先画出蒙版图形标签用于自定义形状，它内部的代码不会显示，仅供引用。

起因

最近做需求时发现有个这样的UI图

第一眼看到这图时脑子就像着用着几个div加border-radio来实现，仔细一看发现这个图形整体的背景色是带渐变的，那就不能用几个元素去拼凑了，这只能用于单一背景色的图形。

整体带渐变背景色就需要用一个元素去画出这个图形，但是这太麻烦了，还有一种方法就是使用蒙版。前端中蒙版有CSS蒙版，SVG蒙版，Canvas蒙版。CSS蒙版需要引入图片，如果要引入图片那还不如直接叫UI把这每个进度的图给我算了，Canvas又觉得小题大做，所以这里使用SVG蒙版。

代码实现

首先画出蒙版图形
标签用于自定义形状，它内部的代码不会显示，仅供引用。rx，ry为矩形圆角边框。
标签为遮罩元素，可将SVG元素当做蒙版显示，白色为全透明，黑色为不透明。

再定义下渐变色

再画个矩形，并引入蒙版

注意该元素的位置要在蒙版元素位置内才能看到效果

效果完成

大体上差不多了，在进度显示上只要控制蒙版矩形的宽和圆的个数就可以了。

SVG还有组的概念，试了下在组上加入渐变，结果不行。
标签用于将多个形状组成一个组（group)。

然而不行，相当于在每个元素上加了个渐变。

GPU服务器私有云蒙版 js蒙版弹层蒙版蒙版工具怎么用

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

转载请注明本文地址：https://www.ucloud.cn/yun/54228.html

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

摘要：接下来我先以为例，简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一，然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变。蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原...

Pines_Cheng 2019-08-29 12:19 评论0 收藏0
SVG蒙版(mask)的基础使用教程

摘要：接下来我先以为例，简单解释蒙版的工作原理。先创建红色前景和蓝色背景在中使用蒙版需要在使用前在中定义并为其设置一个唯一，然后在需要应用蒙版的元素上添加一条属性。在蒙版中的黑白渐变，应用到彩色图层上就会产生透明度的渐变。蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例，简单解释蒙版的工作原...

LittleLiByte 2019-08-01 16:35 评论0 收藏0
SVG

摘要：目前只提供了一些基础功能。中与的区别开发者第一次接触手写那种，虽然很多情况都有设计师使用来完成这项工作，但还是不排除需要利用到的每个元素。轻量级，具备灵活的来自团队，全球非常出名的可视化团队。于是笔者尝试着把移植到中。使用SVG + CSS实现动态霓虹灯文字效果早上无意间进入一个网站，看到他们的LOGO效果略屌，如图：刚开始以为是gif动画之类的，审查元素发现居然是用SVG + ...

104828720 2019-08-29 14:00 评论0 收藏0
【小案例】基于色键技术的纯客户端实时蒙版弹幕

摘要：组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像，我们可以使用色键的方式进行抠图生成蒙版。其中，用于更新蒙版的接口为。导读：本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前，不妨先浏览项目文档，对组件的使用方式和相关接口进行了解。各位童鞋如果经常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 评论0 收藏0