svg 滤镜 filter

简介

svg 中的滤镜功能十分丰富，它以多种方式修改原图案，已达到不同的效果，例如毛玻璃特效、高斯模糊、泛色、光照等等。

svg 中的滤镜使用 <filter> 元素定义，不同的滤镜使用不同内部元素，svg 提供以下滤镜：

<feBlend>：混合，用来把两个对象混合在一起，类似图像编辑软件中图层的混合。
<feColorMatrix>：色彩矩阵，使用矩阵乘法重新计算每个像素 rgba 的值，形成新的颜色。
<feComponentTransfer>：颜色分量重映射，用来重新定义颜色通道的分布。适用于亮度、对比度，色彩平衡或阈值的操作。
<feFuncR>：用于配合 <feComponentTransfer> 来指定 R 通道的分布。
<feFuncG>：用于配合 <feComponentTransfer> 来指定 G 通道的分布。
<feFuncB>：用于配合 <feComponentTransfer> 来指定 B 通道的分布。
<feFuncA>：用于配合 <feComponentTransfer> 来指定不透明度 alpha 通道的分布。
<feComposite>：智能合成，使用两个图像进行像素组合，也可用于类似剪裁，求两图的交并补集操作。
<feConvolveMatrix>：卷积矩阵，使用一个卷积核来确定目标像素与其相邻像素的关系。常用场景有模糊、边缘检测、锐化、压花、斜角和浮雕等等。
<feDiffuseLighting>：漫反射光照。
<feSpecularLighting>：镜面反射光照。
<feDistantLight>：远光光源。
<fePointLight>：点光源。
<feSpotLight>：聚光光源。
<feDisplacementMap>：映射置换。使用一个图像的颜色对另一个图像的像素位置进行偏移。可以造成扭曲，撕裂效果。
<feDropShadow>：投影滤镜。用于生成图像的投影。
<feFlood>：泛色滤镜。用于生成一个矩形的颜色区域。
<feGaussianBlur>：高斯模糊。用于给图像产生高斯模糊。
<feImage>：图片滤镜。用于在滤镜中引入一张图片。
<feMerge>：合并，用于合并多个源的结果。常用来把多个滤镜与原图像进行合并。
<feMergeNode>：合并节点。用于在合并中设置其中一个源的信息。
<feMorphology>：形态调整。用于修整图像的轮廓清晰度。
<feOffset>：偏移。对输入源进行偏移。
<feTile>：瓦砾。对滤镜效果进行堆砌，平铺。类似 <pattern> 元素。
<feTurbulence>：噪点滤镜。生成紊乱的图像，一般用于配合其他滤镜模拟云纹、大理石纹理等特效，也可配合动画生成波浪荡漾的感觉。

上述滤镜必须都定义在 <filter> 元素中，使用格式类似：

<defs>
	<filter id="ExFilter">
		<滤镜1 result="filter-1"></滤镜1>
		<滤镜2 in="filter-1" result="filter-2"></滤镜2>
		<滤镜3 result="filter-3"></滤镜3>
		<滤镜4 in="filter-2" in2="filter-3"></滤镜4>
	</filter>
</defs>

<图像 filter="url(#ExFilter)"></图像>

注意看，一般 <filter> 写在 <defs> 中，为了引用滤镜，还需要给滤镜设置一个 id。

在 <filter> 中用于设置各种滤镜的组合。in、in2 代表滤镜的输入源，但是并不是所有滤镜都有这两个属性，部分滤镜不需要输入源。result 属性指定滤镜的输入源，一个输出源可以作为其他滤镜的输入源，<filter> 会使用最后一个滤镜作为输出源，不论是否设置 result。

filter

<filter> 元素用来定义一个滤镜，其他图案使用滤镜时，可以通过 <filter> 元素的 id 属性来引用。同时，<filter> 也有一个叫 filterUnits 滤镜单元的属性，它用来定义滤镜尺寸的大小控制。

filterUnits 有以下可用值：

userSpaceOnUse

x, y, width 和 height 表示当前坐标系统中的值，这些值表示 <filter>元素在当前用户坐标系中的位置和大小(例如通过 filter 引用该 <filter>元素的元素所在的坐标系系统).

objectBoundingBox

在这种情况下,x, y, width 和 height 表示引用 <filter> 元素的元素的 baow 包围盒的分数或百分比.

---MDN

其他图案引用一个滤镜使用的是 filter 属性，这个属性可以在 css 中使用，比如：

<svg viewBox="0 0 10 10" wdith="200" height="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<filter id="shadow">
			<feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
		</filter>
	</defs>
	<rect x="0" y="0" width="100%" height="100%" fill="white" />
	<circle cx="5" cy="50%" r="4" style="fill: pink; filter: url(#shadow)" />
</svg>