【必赢电子游戏娱乐】Web前端之家,带你轻松打开SVG的大门之滤镜实现

必赢电子游戏娱乐 13

SVG过滤器可以为SVG图形添加一些非常酷的效果,如阴影、模糊和高光等效果。

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

SVG过滤器的例子

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

先来看一个简单的SVG过滤器的例子,直观的感受一些它的效果:

一、 SVG滤镜的原理

在这个例子中,对一个SVG椭圆形应用了模糊滤镜,得到的结果如下:

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

SVG过滤器的输入和输出

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

SVG过滤器在应用过滤效果的时候需要一个输入源。这个输入源可以是一个图形,或图形的alpha通道,或另一个过滤器的输出值。

首先我把图标画出来,

SVG过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可以是另一个过滤器的输入,这样,过滤器可以被链接起来使用。

demo1

下面是一张SVG过滤器输入和输出的说明图片:

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

SVG过滤器的输入通常在SVG滤镜的in属性中指定,例如:

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

如果你需要将一个SVG过滤器的输出作为另一个过滤器的输入,需要在输出元素上添加一个result属性:

必赢电子游戏娱乐 1

这样,在另一个过滤器中,可以通过在in属性中设置值为blur来使用它作为输入源。

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

过滤器的尺寸

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

一个SVG过滤器的尺寸由xywidthheight属性来决定。

必赢电子游戏娱乐 2

xy属性是相对于输入源图形的xy属性来设定。由于过滤器的输出图形通常会比输入图形大,因此,我们通常需要将xy属性设置为负值来剪切掉多出的部分。

demo2

widthheight属性指定过滤器的宽度和高度,大多数时候你需要指定宽度和高度大于输出图像的尺寸,以便于在剪切后尺寸和原来的图形基本相等。

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

多重过滤器

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

你可以通过“元素来同时使用多个SVG过滤器。看下面的例子:

必赢电子游戏娱乐 3

这个例子中创建了一个SVG过滤器,它包括两个滤镜元素:。偏移滤镜的输入源是椭圆图形的alpha通道,高斯模糊滤镜的输入源是偏移滤镜的输出。

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

元素将原始图像和高斯模糊滤镜的输出相结合。在元素中的结合顺序决定了它们的显示顺序,后输入的元素会显示在先输入元素的上面。

必赢电子游戏娱乐 4

上面的代码得到的结果类似于一个drop阴影效果,下面是输出的结果:

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

高斯模糊滤镜

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

SVG高斯模糊滤镜可以将图像进行模糊处理。要使用高斯模糊滤镜,可以使用“元素。下面是一个例子:

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

这个例子中,在元素中使用了滤镜。在矩形元素中的style属性中使用filter来指向这个SVG过滤器,得到的结果如下面图像所示:

必赢电子游戏娱乐 5

模糊的尺寸

demo3

`元素的stdDeviation属性决定图像的模糊尺寸大小。它的数值越大,图像的模糊尺寸越大。在下面的例子中分别设置了三个不同的stdDeviation`值。

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

通过Alpha通道进行模糊

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

在上面的例子中,过滤器的输入源是SourceGraphic,意思是使用图形的RGB颜色来作为输入源。你也可以使用图形的alpha通道来作为输入源,只需要将`元素的in属性设置为SourceAlpha`即可。下面是一个例子:

二、 创建另一个滤镜

注意观察,矩形的填充色是绿色的,但是通过alpha通道来进行模糊之后,得到的结果是黑白色的图像。

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

偏移滤镜

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

偏移滤镜会将输入图形进行移动之后作为结果输出。你可以使用它来上下左右移动图形。通常偏移滤镜都是用于制作drop阴影效果。下面是一个例子:

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

这个例子中定义了两个矩形,它们的尺寸和位置都相同。紫色描边的矩形被应用了偏移滤镜,使它相对于原来的位置向右移动了80个单位,向下移动了20各单位。

必赢电子游戏娱乐 6

颜色矩阵滤镜

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

颜色矩阵滤镜用来在图形的颜色中应用矩阵变换。下面是一个例子:

必赢电子游戏娱乐 7

矩阵的值有`元素中的values`属性提供。这里共有4X5=20个值。在原始图像中它们的值类似下面的样子:

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

000red0000green0000blue000010

必赢电子游戏娱乐 8

上面的代码得到的返回结果如下:

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

注意观察,左边的图形应用了颜色矩阵滤镜,它原来有一个绿色的填充颜色,在使用了颜色矩阵之后只剩下描边了。右边是没有使用颜色矩阵的图形。

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

混合滤镜

必赢电子游戏娱乐 9

混合滤镜可以将多个输入滤镜混合为一个。下面是一个例子:

demo4

这个例子声明了三个滤镜。第一个偏移滤镜,第二个是高斯模糊滤镜。高斯模糊滤镜的输入是偏移滤镜的输出。第三个“滤镜有两个输入,它将这两个输入进行了混合。

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

上面代码得到的结果如下:

必赢电子游戏娱乐 10必赢电子游戏娱乐 11

返回SVG教程目录 相关阅读

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

三、来张位图试试?

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

必赢电子游戏娱乐 12必赢电子游戏娱乐 13

demo5

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图