带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上。

一 SVG滤镜的原理

基本原理描述太多明显有违我们 “轻松打开” 的目的,这里简单的描述一下,SVG在使用了滤镜的元素里,不会将原始图形直接渲染出来,而是会将原始图形的像素信息渲染到临时位图中,然后由 filter元素指定的操作会被应用到这个临时位图,最终把计算结果渲染为最终图形输出。

举个例子,我们用腾讯云的CVM图标来做一个最简单,最常见的滤镜效果——投影。

首先我把图标画出来,

demo1

然后放到一个defs里,没有被引用之前你肯定是什么都看不到的。

接着写filter,尝试使用feGaussianBlur给logo生成阴影效果

<filter id="shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur> </filter>

用stdDeviation 来指定模糊程度,值越大,模糊效果越强,并且可以接受两个数字,分别为X Y方向的模糊度。 然后指定SourceAlpha为他的输入源,如果不指定将在原色值上做模糊。

现在我们看一下效果截图,好像有哪里不对劲?

demo2

这是什么黑乎乎的一坨?原因是滤镜返回的是一个模糊过的阿尔法通道,并不是原始图形。

(另外当我们在浏览器里查看的时候,可以明显的看到滤镜对象的边界明显不同于原始对象的边界,他的默认值为 X等于-10%,Y等于-10%,宽 120%,高120%。这样其实是为滤镜提供了额外的空间,产生的输出大于输入区域。)

那么现在我们改进一下写法

<filter id="shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"></feGaussianBlur> <feOffset in="blur" dx="4" dy="4" result="offset"></feOffset> <feMerge> <feMergeNode in="offset"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter>

result属性指定当前的输出结果,你可以在当前的filter里边通过in调用,而且只能在当前的filter里调用,相当于输出一个局部变量。

改进后的代码,就是通过feMerge把输出的阿尔法通道和原始图形堆叠,来产生投影效果。具体的模糊度可以在stdDeviation里设置,具体的投影位置可以通过offset调整。

现在我们看一下最终的投影效果

demo3

这个实现思路是不是很眼熟?不负责任的说,CSS3的box-shadow,虽然实现有区别,但是原理和这里是一模一样的。

现在,你就可以在任何图形上调用这个投影的滤镜了.

二 创建另一个滤镜

上面我通过一个黑色投影的例子简单的说了一下SVG滤镜的原理,但是那个黑色的投影实在太单调了啊。能不能再给投影来点颜色?

这时候另一个强大的元素 feColorMatrix 就可以出场了。

我们把上边的投影稍微修改一下

<filter id="shadow"> <feColorMatrix type="matrix" result="color" values="            0 0 0 0   0            0 0 0 0.9 0            0 0 0 0.9 0            0 0 0 1   0            " ></feColorMatrix> <feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur> <feOffset in="blur" dx="0" dy="0" result="offset"></feOffset> <feMerge> <feMergeNode in="offset"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter>

feColorMatrix 允许我们修改任意像素点的颜色或阿尔法值,当type= matrix的时候,value 为20个数字信息,把这些数字信息按照4行5列来组合,从上到下每一行代表一个方程式,数字分别乘以RGBA和常量1,代表如何计算 R G B A,如图

我们这里简化一下,将所有不透明区域设置为相同,可以忽略输入颜色和常量,只设置透明度的值

这个矩阵模型最终计算结果是 red(R)0,green(G)0.9,blue(B)0.9,alpha(A)1,生成一个明亮的青色。

然后我们调整了dx和dy,让他从投影变成了发光。

demo4

如果要不同颜色,我们只需要调整这里的RGBA值。

feColorMatrix 的type值还有hueRotate(色相旋转),saturate(饱和度)等,在此不一一列举,详细的用法下一次单独讲一下。

三 来张位图试试?

到目前为止我们只是把一个路径作为滤镜的输入源,SVG的 feImage 元素允许我们使用JPG PNG以及其他SVG文件,现在我们给logo加个背景

<filter id="shadow"> <feImage xlink:href="img/bg.png" result="bg"></feImage> <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"></feGaussianBlur> <feOffset in="blur" dx="4" dy="4" result="offset"></feOffset> <feMerge> <feMergeNode in="bg"></feMergeNode> <feMergeNode in="offset"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter>

demo5

背景加进来之后,先把图标拿掉,我们用一个新的元素来处理一下——feComponentTransfer

<feComponentTransfer in="bg" result="bg"> <feFuncR type="linear" slope="1.5" intercept="0.8"></feFuncR> <feFuncG type="linear" slope="1.5" intercept="0.2"></feFuncG> <feFuncB type="linear" slope="3" intercept="0"></feFuncB> </feComponentTransfer>

可以在feComponentTransfer 里调整 feFuncR feFuncG feFuncB feFuncA,每个子元素都可以单独指定一个type属性,slope是个比例因子,intercept是基准值,具体的计算方式这里不详细讲解,毕竟是轻松打开系列,后面单独谈那些内容吧。

然后我们改变三个通道的值来看看效果

demo6

feFunc的type属性还有另外的几个值,gamma,table等等,用法上大同小异,不同的是参数和算法,这里就不一一列举。

然后我们回到上面的logo,现在都是针对一个输入源在操作,下面我们同时操作两个源。

feComposite元素接受两个源,分别指定在in和in2属性中,他的operator属性的值来决定如何合并两个源。

常用的值有

over 生成的结果就是a层叠在b上面,和我们上面用的mergenode效果是一样的

in 典型的蒙版效果

out 反转蒙版的效果

atop a的一部分在b里面,b的一部分在a外面

xor 包含b的外面的a的部分和a的外面的b的部分

arithmetic 最灵活的一个值,可以提供4个参数,k1 k2 k3 k4,每个像素的每个通道结果按照这个方式计算: k1*a*b + k2*a +k3*b +k4

现在我们拿最常用的蒙版效果来举例用法:

<filter id="in"> <feImage xlink:href="img/bg2.jpg" result="bg"></feImage> <feComposite in="bg" in2="SourceGraphic" operator="in"></feComposite> </filter> <filter id="out"> <feImage xlink:href="img/bg2.jpg" result="bg"></feImage> <feComposite in="bg" in2="SourceGraphic" operator="out"></feComposite> </filter>

效果如下图,其他的值推荐大家自己去尝试一下

demo7

四 其他一些效果

svg瘦身效果

<filter id="erode"> <feMorphology operator="erode" radius="1"></feMorphology> </filter> <filter id="dilate"> <feMorphology operator="dilate" radius="1"></feMorphology> </filter>

feMorphology可以通过erode与dilate的值来对我们的SVG图像进行瘦身和加厚,效果如下

demo8

不过效果里可以清晰的看出,对线条进行瘦身效果会造成严重破坏。

浮雕效果

feConvolveMatrix元素允许我们按照他临近的像素计算像素新值,于是这个滤镜就可以生成 模糊,锐化,浮雕这些效果。他的原理就是合并像素和他临近的像素,生成结果像素。

demo9

小结

filter元素包含一系列滤镜基元,每个都接受一个或者多个输入,同时提供唯一的结果供其他基元使用,这就是SVG滤镜工作的方式。篇幅有限,并没有把SVG滤镜的知识全部详细的介绍,后面会另外单独介绍一些知识点。

附 几种SVG图像的fallbacks

使用svg必然要因为兼容性等因素考虑好fallbacks,常用的有几种方式:

1.通过alt或者文本标签的方式做提示 2.通过判断或者查询显示一张图片

通常都不会选择第一种。

第二种,也有多种方案,下面我们列举几个:

1.html的source标签属性 type=”image/svg+xml” 方式,在支持的浏览器里使用SVG,在不支持的浏览器里显示PNG,优点是type灵活,可用于SVG,WEBP等,而且保持了img标签的特性,方便做布局操作。缺点兼容性要求高,ios9+,安卓5+,微软Edge+

<picture> <source type="image/svg+xml" srcset="svg.svg"> <img src="svg.png" alt=""> </picture>

2.srcset=”svg.svg 2X” 方式,在2倍屏显示SVG,在其他显示PNG,缺点同上

<picture> <source srcset="svg.svg 2X"> <img src="svg.png" alt=""> </picture>

3.svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好,兼容所有主流浏览器

<svg width="200" height="200"> <image xlink:href="svg.svg" src="svg.png" width="200" height="200" /> </svg>

点击查看DOME集合

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(上)

DR本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。例如:路径动画图形渐变:线条动画:以及...

2560
来自专栏深度学习之tensorflow实战篇

关于决策树ID3算法,熵,信息增益率的权威解释,稍后奉上python代码

决策树分类算法概述 决策树算法是从数据的属性(或者特征)出发,以属性作为基础,划分不同的类。 看了本书,叫知识发现,内容很好,果断扫描 这里...

2914
来自专栏腾讯社交用户体验设计

带你轻松打开svg滤镜的大门

803
来自专栏iOSDevLog

将Core ML模型集成到您的应用程序中

此示例应用程序使用经过训练的MarsHabitatPricer.mlmodel模型来预测火星上的栖息地价格。

571
来自专栏区块链

15分钟破解网站验证码

概述   很多开发者都讨厌网站的验证码,特别是写网络爬虫的程序员,而网站之所以设置验证码,是为了防止机器人访问网站,造成不必要的损失。现在好了,随着机器学习技术...

1647
来自专栏章鱼的慢慢技术路

OpenGL基本框架与三维对象绘制

1252
来自专栏数据小魔方

sparklines迷你图系列16——Distribution(Spread)

今天跟大家分享sparklines迷你图系列16——Distribution(Spread)。 这种图表用中文翻译是在费解,没有特别合适的叫法,但是实际上它是一...

2656
来自专栏深度学习之tensorflow实战篇

R语言高级绘图命令(标题-颜色等)

plot(x)          以x的元素值为纵坐标、以序号为横坐标绘图 plot(x,y)        x(在x-轴上)与y(在y-轴上)的二元作图 ...

2776
来自专栏PaddlePaddle

【进阶篇】C-API 使用流程

编写|PaddlePaddle 排版|wangp 这篇推文介绍 PaddlePaddle C-API 整体使用流程 1 使用流程 使用 C-API 的工作流...

2793
来自专栏ATYUN订阅号

使用Tensorflow对象检测在安卓手机上“寻找”皮卡丘

在TensorFlow的许多功能和工具中,隐藏着一个名为TensorFlow对象探测API(TensorFlow Object Detection API)的组...

4125

扫码关注云+社区