浅谈 SVG Filter

<filter> 是 SVG 一个非常有用的标签,利用内置的 SVG 自带的滤镜可以实现很多效果,这里浅谈一下滤镜的组合使用,对于自带的滤镜就不多讲了,可以详细看 MDN 文档。

用 filter 实现描边

先来熟悉一下 filter 的使用:

1
2
3
4
5
6
7
8
9
<filter id="strokeFilter" height="160%" width="180%" y="-30%" x="-40%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5"></feGaussianBlur>
<feComponentTransfer result="outBlur">
<feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
<feFlood flood-color="#fc3" flood-opacity="1" result="outColor"></feFlood>
<feComposite in="outColor" in2="outBlur" operator="in" result="outGlow"></feComposite>
<feComposite in="SourceGraphic" in2="outGlow" operator="over"></feComposite>
</filter>

修改 stdDeviation 以及 flood-color 即可绘制出描边。

组合 filter 的使用

  1. <feMerge>
    1
    2
    3
    4
    5
    6
    <feMerge>
    <feMergeNode in="filter1" />
    <feMergeNode in="filter2" />
    <feMergeNode in="filter3" />
    <feMergeNode in="SourceGraphic" />
    </feMerge>

按照顺序先后层叠,如下图

svg-filter-merge-2.png

  1. <feComposite>

主要用到的属性是 in , in2 , operator

1
<feComposite in="A" in2="B" operator="over" />

over 为覆盖,也就是 A 层叠 B 的上方,正如 <feMergeNode>

1
<feComposite in="A" in2="B" operator="in" />

in 类似于蒙版效果,A 的一部分重叠在 B 的不透明区域,仅仅基于 Balpha 通道。

1
<feComposite in="A" in2="B" operator="out" />

A 的一部分位于在 B 的不透明区域外部。

1
<feComposite in="A" in2="B" operator="atop" />

A 的一部分位于 B 里面,B 的一部分在 A 的外面。如 “报纸 atop 桌面,结果包含桌面上的报纸部分以及桌面。

1
<feComposite in="A" in2="B" operator="xor" />

包含位于 B 的外面的 A 的部分以及位于 A 的外面的 B 的部分。

1
<feComposite in="A" in2="B" operator="arithmetic" ... />

提供 4 个系数:k1, k2, k3, k4 ,每个像素的每个通道的结果按照如下方式计算:k1 A B + k2 A + k3 B + k4。AB 分别来自于输入图形的颜色分量。

可以在这个例子里面尝试变换 operator 来查看 filter 的作用范围以及得到的结果。

动态 filter

大多数 filter 都支持 <animate> 元素,下面是一个为元素添加呼吸描边的例子: