关于前端:SVG-滤镜从入门到放弃

想写一篇对于 SVG 滤镜的文章已久，SVG 滤镜的存在，让原本就十分弱小的 CSS 锦上添花。让仅仅应用 CSS/HTML/SVG 创作的成果更上一层楼。题图为袁川老师应用 SVG 滤镜实现的云彩成果 — CodePen Demo — Cloud (SVG filter + CSS)。

什么是 SVG 滤镜

SVG 滤镜与 CSS 滤镜相似，是 SVG 中用于创立简单成果的一种机制。很多人看到 SVG 滤镜简单的语法容易心生退意。本文力求应用最简洁明了的形式让大家尽量弄懂 SVG 滤镜的应用形式。

本文默认读者曾经把握了肯定 SVG 的基本概念和用法。

SVG 滤镜的品种

SVG 滤镜包含了：

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

看着内容很多，有点相似于 CSS 滤镜中的不同性能：blur()、contrast()、drop-shadow()。

SVG 滤镜的语法

咱们须要应用 <defs> 和 <filter> 标签来定义一个 SVG 滤镜。

通常所有的 SVG 滤镜元素都须要定义在 <defs> 标记内。

当初，基本上古代浏览器，即便不应用 <defs> 包裹 <filter>，也可能定义一个 SVG 滤镜。

这个 <defs> 标记是 definitions 这个单词的缩写，能够蕴含很多种其它标签，包含各种滤镜。

其次，应用 <filter> 标记用来定义 SVG 滤镜。<filter> 标签须要一个 id 属性，它是这个滤镜的标记。SVG 图形应用这个 id 来援用滤镜。

看一个简略的 DEMO：

<div class="cssFilter"></div>
<div class="svgFilter"></div>

<svg>
    <defs>
        <filter id="blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
</svg>

div {
    width: 100px;
    height: 100px;
    background: #000;
}
.cssblur {filter: blur(5px);
}
.svgFilter{filter: url(#blur);
}

这里，咱们在 defs 的 filter 标签内，使用了 SVG 的 feGaussianBlur 滤镜，也就是含糊滤镜，该滤镜有两个属性 in 和 stdDeviation。其中 in="SourceGraphic" 属性指明了含糊成果要利用于整个图片，stdDeviation 属性定义了含糊的水平。最初，在 CSS 中，应用了 filter: url(#blur) 去调用 HTML 中定义的 id 为 blur 的滤镜。

为了不便了解，也应用 CSS 滤镜 filter: blur(5px) 实现了一个相似的滤镜，不便比拟，后果图如下：

CodePen Demo – SVG 滤镜

嘿，能够看到，应用 SVG 的含糊滤镜，实现了一个和 CSS 含糊滤镜一样的成果。

CSS filter 的 url 模式

上文的例子中应用了 filter: url(#blur) 这种模式引入了一个 SVG 滤镜成果，url 是 CSS 滤镜属性的关键字之一，url 模式是 CSS 滤镜提供的能力之一，容许咱们引入特定的 SVG 过滤器，这极大的加强 CSS 中滤镜的能力。

相当于所有通过 SVG 实现的滤镜成果，都能够疾速的通过 CSS 滤镜 URL 模式一键引入。

多个滤镜搭配工作

和 CSS 滤镜一样，SVG 滤镜也是反对多个滤镜搭配混合应用的。

所以咱们常常能看到一个 <filter> 标签内有大量的代码。很容易就懵了~

再来看个简略的例子：

<div></div>

<svg>
    <defs>
        <!-- Filter declaration -->
        <filter id="MyFilter">

            <!-- offsetBlur -->
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
            <feOffset in="blur" dx="10" dy="10" result="offsetBlur" />

            <!-- merge SourceGraphic + offsetBlur -->
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
</svg>

div {
    width: 200px;
    height: 200px;
    background: url(xxx);
    filter: url(#MyFilter);
}

咱们先来看看整个滤镜的最终后果，后果长这样：

CSS 可能一行代码就能实现的事件，SVG 竟然用了这么多代码。（当然，这里 CSS 也不好实现，不是简略容器的暗影，而是 PNG 图片图形的轮廓暗影）

合成步骤

首先看这一段：

<!-- offsetBlur -->
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
<feOffset in="blur" dx="10" dy="10" result="offsetBlur" />

首先 <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" /> 这一段，咱们下面也讲到了，会生成一个含糊成果，这里多了一个新的属性 result='blur'，这个就是 SVG 的一个个性，不同滤镜作用的成果能够通过 result 产出一个两头后果（也称为 primitives 图元），其余滤镜能够应用 in 属性导入不同滤镜产出的 result，持续操作。

紧接着，<feOffset> 滤镜还是很好了解的，应用 in 拿到了上一步的后果 result = 'blur'，而后做了一个简略的位移。

这里就有一个十分重要的知识点：在不同滤镜中利用 result 和 in 属性，能够实现在前一个根本变换操作上建设另一个操作，比方咱们的例子中就是增加含糊后又增加位移成果。

联合两个滤镜，产生的图形成果，其实是这样的：

实际效果中还呈现了原图，所以这里咱们还应用了 <feMerge> 标签，合并了多个成果。也就是上述这段代码：

<!-- merge SourceGraphic + offsetBlur -->
<feMerge>
    <feMergeNode in="offsetBlur" />
    <feMergeNode in="SourceGraphic" />
</feMerge>

feMerge 滤镜容许同时利用滤镜成果而不是按程序利用滤镜成果。利用 result 存储别的滤镜的输入能够实现这一点，而后在一个 <feMergeNode> 子元素中拜访它。

• <feMergeNode in="offsetBlur" /> 示意了上述两个滤镜的最终输入后果 offsetBlur ，也就是暗影的局部
• <feMergeNode in="SourceGraphic" /> 中的 in="SourceGraphic" 关键词示意图形元素本身将作为 <filter> 原语的原始输出

整体再遵循后输出的层级越高的准则，最终失去上述后果。示意流程图如下：

至此，根本就把握了 SVG 滤镜的工作原理，及多个滤镜如何搭配应用。接下来，只须要搞懂不同的滤镜能产生什么样的成果，有什么不同的属性，就能大抵对 SVG 滤镜有个根本的把握！

对于 SVG 滤镜还须要晓得的

下面大抵过了一下 SVG 滤镜的应用流程，过程中提到了一些属性，可能也漏掉了一些属性的解说，本章节将补充阐明一下。

滤镜标签通用属性

有一些属性是每一个滤镜标签都有，都能够进行设置的。

in 属性的 6 个取值

SVG filter 中的 in 属性，指定滤镜成果的输出源，能够是某个滤镜导出的 result，也能够是上面 6 个值：

更多 SVG 滤镜介绍解说

下面曾经提到了几个滤镜，咱们简略回顾下：

• <feGaussianBlur > – 含糊滤镜
• <feOffset > – 位移滤镜
• <feMerge> – 多滤镜叠加滤镜

接下来再介绍一些比拟常见，有意思的 SVG 滤镜。

feBlend 滤镜

<feBlend> 为混合模式滤镜，与 CSS 中的混合模式相相似。

在 CSS 中，咱们有混合模式 mix-blend-mode 和 background-blend-mode。我有过十分多篇对于 CSS 混合模式相干的一些利用。如果你还不太理解 CSS 中的混合模式，能够先看看这几篇文章：

• 不堪设想的混合模式 mix-blend-mode
• 不堪设想的混合模式 background-blend-mode
• CSS 奇思妙想 — 应用 background 发明各种美好的背景

SVG 中的混合模式品种比 CSS 中的要少一些，只有 5 个，其作用与 CSS 混合模式完全一致：

• normal — 失常
• multiply — 正片叠底
• screen — 滤色
• darken — 变暗
• lighten— 变亮

简略一个 Demo，咱们有两张图，利用不同的混合模式，能够失去不一样的混合后果：

<div></div>

<svg>
    <defs>
        <filter id="lighten" x="0" y="0" width="200" height="250">
            <feImage width="200" height="250" xlink:href="image1.jpg" result="img1" />
            <feImage width="200" height="250" xlink:href="image2.jpg" result="img2" />
            <feBlend mode="lighten" in="img1" in2="img2"/>
        </filter>
    </defs>
</svg>

.container {
    width: 200px;
    height: 250px;
    filter: url(#lighten);
}

这里还用到了一个 <feImage> 滤镜，它的作用是提供像素数据作为输入，如果内部起源是一个 SVG 图像，这个图像将被栅格化。

上述使用了 feBlend 滤镜中的 mode="lighten" 后的后果，两个图像叠加作用了 lighten 混合模式：

看看全副 5 中混合模式的成果：

CodePen Demo — SVG Filter feBlend Demo

feColorMatrix

<feColorMatrix> 滤镜也是 SVG 滤镜中十分有意思的一个滤镜，顾名思义，它的名字中蕴含了矩阵这个单词，示意该滤镜基于 转换矩阵 对色彩进行变换。每一像素的色彩值(一个示意为[红, 绿, 蓝, 透明度] 的矢量) 都通过矩阵乘法 (matrix multiplated) 计算出的新色彩。

这个滤镜略微有点简单，咱们一步一步来看。

<feColorMatrix> 滤镜有 2 个公有属性 type 和 values，type 它反对 4 种不同的类型：saturate | hueRotate | luminanceToAlpha | matrix，其中局部与 CSS Filter 中的一些滤镜成果相似。

在这里，我做了一个简略的对于 <feColorMatrix> 前 3 个属性 saturate | hueRotate | luminanceToAlpha 的成果示意 DEMO — CodePen – feColorMatrix Demo，能够感触下它们的具体的成果：

saturate、hueRotate 滤镜和 CSS 中的 filter 中的 saturate、hue-rotate 的作用是截然不同的。

feColorMatrix 中的 type=matrix

feColorMatrix 中的 type=matrix 了解起来要略微更简单点，它的 values 须要传入一个 4×5 的矩阵。

像是这样：

<filter id="colorMatrix">
  <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0"/>
</filter>

要了解如何使用这些填写矩阵，就不得不直面另外一个问题 — 图像的示意。

数字图像的实质是一个多维矩阵。在图像显示时，咱们把图像的 R 重量放进红色通道里，B 重量放进蓝色通道里，G 重量放进绿色通道里。通过一系列解决，显示在屏幕上的就是咱们所看到的彩色图像了。

而 feColorMatrix 中的 matrix 矩阵，就是用来示意不同通道的值每一个重量的值，最终通过计算失去咱们熟知的 rgba() 值。

计算逻辑为：

/* R G B A 1 */ 
1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 0 
0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0 
0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0 
0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0

中文的文章，对 feColorMatrix 的 matrix 解说最好的应该就是大漠老师的这篇 — 详解 feColorMatrix，对具体的表示法感兴趣的能够看看。

仅仅是应用的话，这里还有一个可视化的 DEMO — CodePen – feColorMatrix Demo，帮忙大家了解记忆：

到目前为止，大部分 SVG 滤镜的展现解说都是 CSS 现有能力可能实现的，那 SVG 滤镜的独特与魅力到底在哪呢？有什么是 CSS 能力无奈做到的么？上面来看看另外几个有意思的 SVG 滤镜。

feSpecularLighting/feDiffuseLighting 光照滤镜

feSpecularLighting 与 feDiffuseLighting 都意为光照滤镜，应用它们能够照亮一个源图形，不同的是，feSpecularLighting 为镜面照明，而 feDiffuseLighting 为散射光照明。

• feDiffuseLighting：来自内部光源，适宜模仿太阳光或者灯光照明
• feSpecularLighting：指定从反射面反射的二次光

简略看其中一个 Demo，代码看着有点多，然而一步一步也很好了解：

<div></div>
<div class="svg-filter"></div>
<svg>
    <defs>
        <filter id="filter">
            <!--Lighting effect-->
            <feSpecularLighting in="SourceGraphic" specularExponent="20" specularConstant="0.75" result="spec">
              <fePointLight x="0" y="0" z="200" />
            </feSpecularLighting>
            <!--Composition of inputs-->
            <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
        </filter>
    </defs>
</svg>

div {background: url(avator.png);
}
.svg-filter {filter: url(#filter);
}

右边是原图，左边是利用了光照滤镜之后的成果。

CodePen – feSpotLight SVG Light Source

feMorphology 滤镜

feMorphology 为状态滤镜，它的输出源通常是图形的 alpha 通道，用来它的两个操作能够使源图形侵蚀（变薄）或扩张（加粗）。

应用属性 operator 确定是要侵蚀成果还是扩张成果。应用属性 radius 示意成果的水平，能够了解为笔触的大小。

• operator：erode 侵蚀模式，dilate 为扩张模式，默认为 erode
• radius：笔触的大小，承受一个数字，示意该模式下的成果水平，默认为 0

咱们将这个滤镜简略的利用到文字上看看成果：

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>

p {font-size: 64px;}
.dilate {filter: url(#dilate);
}
.erode {filter: url(#erode);
}

成果如下：最右边的是失常文字，两头的是扩张的模式，左边的是侵蚀模式，看看成果，十分好了解：

当然，咱们还能够将其使用在图片之上，这时，并非是简略的让图像的笔触变粗或者变细，

• 对于 erode 模式，会将图片的每一个像素向更暗更通明的方向变动，
• 而 dilate 模式，则是将每个向像素四周左近更亮更不通明的方向变动

简略看个示例动画 DEMO，咱们有两张图，别离作用 operator="erode" 和 operator="dilate"，并且动静的去扭转它们的 radius，其中一个的代码示意如下：

<svg width="450" height="300" viewBox="0 0 450 300">
    <filter id="morphology">
        <feMorphology operator="erode" radius="0">
            <animate attributeName="radius" from="0" to="5" dur="5s" repeatCount="indefinite" />
        </feMorphology>
    </filter>

    <image xlink:href="image.jpg" width="90%" height="90%" x="10" y="10" filter="url(#morphology)"></image>
</svg>

上图右边是扩张模式，左边是侵蚀模式：

CodePen Demo — SVG feMorphology Animation

feTurbulence 滤镜

turbulence 意为湍流，不稳固气流，而 SVG <feTurbulence> 滤镜可能实现半透明的烟熏或波状图像。通常用于实现一些非凡的纹理。滤镜利用 Perlin 噪声函数创立了一个图像。噪声在模仿云雾成果时十分有用，能产生非常复杂的质感，利用它能够实现了人造纹理比如说云纹、大理石纹的合成。

有了 feTurbulence，咱们能够自应用 SVG 创立纹理图形作为置换图，而不须要借助内部图形的纹理成果，即可创立简单的图形成果。

这个滤镜，我集体认为是 SVG 滤镜中最有意思的一个，因为它容许咱们本人去发明出一些纹理，并且叠加在其余成果之上，生成出十分有意思的动效。

feTurbulence 有三个属性是咱们特地须要留神的：type、baseFrequency、numOctaves：

• type：实现的滤镜的类型，可选fractalNoise 分形噪声，或者是 turbulence 湍流噪声。

  • fractalNoise：分形噪声更加的平滑，它产生的噪声质感更靠近云雾
  • turbulence：湍流噪声
• baseFrequency：示意噪声函数的根本频率的参数，频率越小，产生的图形越大，频率越大，产生的噪声越简单其图形也越小越精密，通常的取值范畴在 0.02 ~ 0.2
• numOctaves：示意噪声函数的精密度，数值越高，产生的噪声更具体。默认值为 1

这里有一个十分好的网站，用于示意 feTurbulence 所产生的两种噪声的成果：http://apike.ca/ – feTurbulence

两种噪声的代码基本一致，只是 type 类型不同：

<filter id="fractal" >
  <feTurbulence id="fe-turb-fractal" type="fractalNoise" baseFrequency="0.00025" numOctaves="1"/>
</filter>
<filter id="turbu">
  <feTurbulence id="fe-turb-turbulence" type="fractalNoise" baseFrequency="0.00025" numOctaves="1"/>
</filter>

咱们通过扭转 baseFrequency 和 numOctaves 参数看看理论产生的两种噪声的成果：

同时，baseFrequency 容许咱们传入两个值，咱们能够只扭转某一方向上的频率，具体的你能够戳这个 Demo 看看：CodePen — feTurbulence baseFrequency & numOctaves

单单一个 <feTurbulence> 滤镜其实是比拟难搞懂这滤镜想干什么的，须要将这个滤镜作为纹理或者输出，和其余滤镜一起搭配应用，实现一些成果，上面咱们来看看：

应用 feTurbulence 滤镜实现文字流动的成果

首先，尝试将 feTurbulence 所产生的纹理和文字相结合。

简略的代码如下：

<div>Coco</div>
<div class="turbulence">Coco</div>

<svg>
    <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.03" numOctaves="1" />
        <feDisplacementMap in="SourceGraphic" scale="50"></feDisplacementMap>
    </filter>
</svg>

.turbulence {filter: url(#fractal);
}

右边是失常的成果，后边是利用了 <feTurbulence> 的成果，你能够试着点进 Demo，更改 baseFrequency 和 numOctaves 参数的大小，能够看到不同的成果：

CodePen Demo — feTurbulence text demo

feDisplacementMap 映射置换滤镜

下面的 Demo 还用到了 feDisplacementMap 滤镜，也须要简略的解说下。

feDisplacementMap 为映射置换滤镜，想要用好这个滤镜不太容易，须要把握十分多的对于 PhotoShop 纹理创立或者是图形色调相干的常识。该滤镜用来自图像中从 in2 的输出值到空间的像素值置换图像从 in 输出值到空间的像素值。

说人话就是 feDisplacementMap 实际上是用于扭转元素和图形的像素地位的。该滤镜通过遍历原图形的所有像素点，应用 feDisplacementMap 从新映射到一个新的地位，造成一个新的图形。

在上述的 feTurbulence 滤镜与文字的联合应用中，咱们通过 feTurbulence 噪声失去了噪声图形，而后通过 feDisplacementMap 滤镜依据 feTurbulence 所产生的噪声图形进行形变，扭曲，液化，失去最终的成果。

在 MDN 上有这个滤镜转化的一个公式（感兴趣的能够钻研下，我啃不动了）：

P'(x,y) ← P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

应用 feTurbulence 滤镜实现褶皱纸张的纹理

好，咱们持续 feTurbulence，应用这个滤镜，咱们能够生成各种不同的纹理，咱们能够尝试应用 feTurbulence 滤镜搭配光照滤镜实现褶皱的纸张纹理成果，代码也非常少：

<div></div>
<svg>
    <filter id='roughpaper'>
        <feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" />

        <feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='2'>
            <feDistantLight azimuth='45' elevation='60' />
        </feDiffuseLighting>
    </filter>
</svg>

div {
    width: 650px;
    height: 500px;
    filter: url(#roughpaper);
}

成果如下：

CodePen Demo — Rough Paper Texture with SVG Filters

你能够在 Sara Soueidan 的一次对于 SVG Filter 的分享上，找到制作它的教程：Youtube — SVG Filters Crash Course

应用 feTurbulence 滤镜实现按钮 hover 成果

应用 feTurbulence 滤镜搭配 feDisplacementMap 滤镜，还能够制作一些十分有意思的按钮成果。

尝试实现一些故障格调的按钮，其中一个按钮的代码如下：

<div class="fe1">Button</div>
<div class="fe2">Button</div>

<svg>
    <defs>
        <filter id="fe1">
            <feTurbulence id="animation" type="fractalNoise" baseFrequency="0.00001 9.9999999" numOctaves="1" result="warp">
                <animate attributeName="baseFrequency" from="0.00001 9.9999" to="0.00001 0.001" dur="2s" repeatCount="indefinite"/>
            </feTurbulence>
            <feOffset dx="-90" dy="-90" result="warpOffset"></feOffset>
            <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset"></feDisplacementMap>
        </filter>
    </defs>
</svg>

.fe1 {
    width: 200px;
    height: 64px;
    outline: 200px solid transparent;
}

.fe1:hover {filter: url(#fe1);
}

通过 hover 按钮的时候，给按钮增加滤镜成果，并且滤镜自身带有一个有限循环的动画：

残缺的代码你能够戳这里：CodePen Demo – SVG Filter Button Effects

应用 feTurbulence 滤镜实现云彩成果

最初，咱们回到题图上的云彩成果，应用 feTurbulence 滤镜，咱们能够十分真切的应用 SVG 模拟出实在的云彩成果。

首先，通过随机生成的多重 box-shadow，实现这一一个图形：

<div></div>

div {
    width: 1px;
    height: 1px;
    box-shadow: rgb(240 255 243) 80vw 11vh 34vmin 16vmin, rgb(17 203 215) 33vw 71vh 23vmin 1vmin, rgb(250 70 89) 4vw 85vh 21vmin 9vmin, rgb(198 241 231) 8vw 4vh 22vmin 12vmin, rgb(198 241 231) 89vw 11vh 31vmin 19vmin, rgb(240 255 243) 5vw 22vh 38vmin 19vmin, rgb(250 70 89) 97vw 35vh 33vmin 16vmin, rgb(250 70 89) 51vw 8vh 35vmin 14vmin, rgb(17 203 215) 75vw 57vh 40vmin 4vmin, rgb(250 70 89) 28vw 18vh 31vmin 11vmin, rgb(250 70 89) 8vw 89vh 31vmin 2vmin, rgb(17 203 215) 13vw 8vh 26vmin 19vmin, rgb(240 255 243) 98vw 12vh 35vmin 5vmin, rgb(17 203 215) 35vw 29vh 27vmin 18vmin, rgb(17 203 215) 67vw 58vh 22vmin 15vmin, rgb(198 241 231) 67vw 24vh 25vmin 7vmin, rgb(17 203 215) 76vw 52vh 22vmin 7vmin, rgb(250 70 89) 46vw 86vh 26vmin 20vmin, rgb(240 255 243) 50vw 20vh 25vmin 1vmin, rgb(250 70 89) 74vw 14vh 25vmin 16vmin, rgb(240 255 243) 31vw 100vh 29vmin 20vmin
}

这个工作，你能够交给 SASS、LESS 或者 JavaScript 这些可能有循环函数能力的语言去生成，它的成果大略是这样：

紧接着，通过 feTurbulence 产生分形噪声图形，应用 feDisplacementMap 进行映射置换，最初给图形叠加上这个滤镜成果。

<svg width="0">
  <filter id="filter">
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
    <feDisplacementMap in="SourceGraphic" scale="240" />
  </filter>
</svg>

div {filter: url(#filter);
}

即可失去这样的云彩成果：

残缺的代码，你能够戳这里到袁川老师的 CodePen 观看：Cloud (SVG filter + CSS)

总结一下

对于 SVG 滤镜入门的第一篇总算差不多了，本文简略的介绍了一下 SVG 滤镜的应用形式以及一些常见的 SVG 滤镜并给出了最简略的一些应用成果，心愿大家看完能对 SVG 滤镜有一个简略的意识。

本文列举的滤镜成果更多的是单个成果或者很少几个组合在一起的成果，理论的应用或者利用到利用场景下其实会是更多滤镜的的组合产生出的一个成果。

前面的文章将会更加粗疏的去探讨剖析多个 SVG 滤镜组合成果，探讨更简单的排列组合。

文章的题目叫 SVG 滤镜从入门到放弃 因为 SVG 滤镜学起来的确太繁琐太累了，它不像 CSS 滤镜或者混合模式那么容易上手那么简略。当然也因为 SVG 滤镜的性能十分弱小，定制化能力强以及它曾经存在了十分之久无关。SVG 滤镜的兼容性也很好，它们其实是早于 CSS3 一些特殊效果之前就曾经存在的。

CSS 其实始终在向 SVG 的一些非凡能力聚拢，用更简略的语法让人更易上手，不过 SVG 滤镜还是有其独特的魅力所在。后续将会有更多对于 SVG 滤镜的文章。也心愿读到这里的同学不要放弃！

参考资料

• 详解 feColorMatrix
• 深刻了解 SVG feDisplacementMap 滤镜及理论利用
• SVG tutorialspoint
• apike.ca – SVG Filter
• FILTER EFFECTS
• Youtube – SVG Filter Effects | feTurbulence
• Youtube – SVG Filters Crash Course
• DistortedButtonEffects

最初

好了，本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。