什么是SVG濾鏡

這篇文章主要介紹“什么是 SVG 濾鏡”，在日常操作中，相信很多人在什么是 SVG 濾鏡問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”什么是 SVG 濾鏡”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供沙河口網(wǎng)站建設(shè)、沙河口做網(wǎng)站、沙河口網(wǎng)站設(shè)計(jì)、沙河口網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、沙河口企業(yè)網(wǎng)站模板建站服務(wù)，10多年沙河口做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

想寫(xiě)一篇關(guān)于 SVG 濾鏡的文章已久，SVG 濾鏡的存在，讓本來(lái)就非常強(qiáng)大的 CSS 如虎添翼。讓僅僅使用 CSS/HTML/SVG  創(chuàng)作的效果更上一層樓。題圖為袁川老師使用 SVG 濾鏡實(shí)現(xiàn)的云彩效果 -- CodePen Demo -- Cloud (SVG filter +  CSS)[1]。

什么是 SVG 濾鏡

SVG 濾鏡與 CSS 濾鏡類似，是 SVG 中用于創(chuàng)建復(fù)雜效果的一種機(jī)制。很多人看到 SVG  濾鏡復(fù)雜的語(yǔ)法容易心生退意。本文力圖使用最簡(jiǎn)潔明了的方式讓大家盡量弄懂 SVG 濾鏡的使用方式。

本文默認(rèn)讀者已經(jīng)掌握了一定 SVG 的基本概念和用法。

SVG 濾鏡的種類

SVG 濾鏡包括了：

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

看著內(nèi)容很多，有點(diǎn)類似于 CSS 濾鏡中的不同功能：blur()、contrast()、drop-shadow() 。

SVG 濾鏡的語(yǔ)法

我們需要使用 <defs>和<filter>標(biāo)簽來(lái)定義一個(gè) SVG 濾鏡。

通常所有的 SVG 濾鏡元素都需要定義在<defs>標(biāo)記內(nèi)。

• 現(xiàn)在，基本上現(xiàn)代瀏覽器，即使不使用<defs>

  包裹 <filter>

  ，也能夠定義一個(gè) SVG 濾鏡。

這個(gè)<defs>標(biāo)記是 definitions 這個(gè)單詞的縮寫(xiě)，可以包含很多種其它標(biāo)簽，包括各種濾鏡。

其次，使用<filter>標(biāo)記用來(lái)定義 SVG 濾鏡。<filter>標(biāo)簽需要一個(gè) id 屬性，它是這個(gè)濾鏡的標(biāo)志。SVG 圖形使用這個(gè) id  來(lái)引用濾鏡。

看一個(gè)簡(jiǎn)單的 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); }

這里，我們?cè)?defs 的 filter 標(biāo)簽內(nèi)，運(yùn)用了 SVG 的 feGaussianBlur 濾鏡，也就是模糊濾鏡， 該濾鏡有兩個(gè)屬性 in 和  stdDeviation。其中 in="SourceGraphic" 屬性指明了模糊效果要應(yīng)用于整個(gè)圖片，stdDeviation  屬性定義了模糊的程度。最后，在 CSS 中，使用了 filter: url(#blur) 去調(diào)用 HTML 中定義的 id 為 blur 的濾鏡。

為了方便理解，也使用 CSS 濾鏡 filter: blur(5px) 實(shí)現(xiàn)了一個(gè)類似的濾鏡，方便比較，結(jié)果圖如下：

CodePen Demo - SVG 濾鏡[2]

嘿，可以看到，使用 SVG 的模糊濾鏡，實(shí)現(xiàn)了一個(gè)和 CSS 模糊濾鏡一樣的效果。

CSS filter 的 url 模式

上文的例子中使用了 filter: url(#blur) 這種模式引入了一個(gè) SVG 濾鏡效果，url 是 CSS 濾鏡屬性的關(guān)鍵字之一，url 模式是  CSS 濾鏡提供的能力之一，允許我們引入特定的 SVG 過(guò)濾器，這極大的增強(qiáng) CSS 中濾鏡的能力。

相當(dāng)于所有通過(guò) SVG 實(shí)現(xiàn)的濾鏡效果，都可以快速的通過(guò) CSS 濾鏡 URL 模式一鍵引入。

多個(gè)濾鏡搭配工作

和 CSS 濾鏡一樣，SVG 濾鏡也是支持多個(gè)濾鏡搭配混合使用的。

所以我們經(jīng)常能看到一個(gè)<filter>標(biāo)簽內(nèi)有大量的代碼。很容易就懵了~

再來(lái)看個(gè)簡(jiǎn)單的例子：

<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); }

我們先來(lái)看看整個(gè)濾鏡的最終結(jié)果，結(jié)果長(zhǎng)這樣：

CSS 可能一行代碼就能實(shí)現(xiàn)的事情，SVG 居然用了這么多代碼。(當(dāng)然，這里 CSS 也不好實(shí)現(xiàn)，不是簡(jiǎn)單容器的陰影，而是 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" /> 這一段，我們上面也講到了，會(huì)生成一個(gè)模糊效果，這里多了一個(gè)新的屬性 result='blur'，這個(gè)就是 SVG 的一個(gè)特性，不同濾鏡作用的效果可以通過(guò) result 產(chǎn)出一個(gè)中間結(jié)果（也稱為 primitives 圖元），其他濾鏡可以使用 in 屬性導(dǎo)入不同濾鏡產(chǎn)出的 result，繼續(xù)操作。

緊接著，<feOffset> 濾鏡還是很好理解的，使用 in 拿到了上一步的結(jié)果 result = 'blur'，然后做了一個(gè)簡(jiǎn)單的位移。

這里就有一個(gè)非常重要的知識(shí)點(diǎn)：在不同濾鏡中利用 result 和 in 屬性，可以實(shí)現(xiàn)在前一個(gè)基本變換操作上建立另一個(gè)操作，比如我們的例子中就是添加模糊后又添加位移效果。

結(jié)合兩個(gè)濾鏡，產(chǎn)生的圖形效果，其實(shí)是這樣的：

實(shí)際效果中還出現(xiàn)了原圖，所以這里我們還使用了 <feMerge> 標(biāo)簽，合并了多個(gè)效果。也就是上述這段代碼：

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

feMerge 濾鏡允許同時(shí)應(yīng)用濾鏡效果而不是按順序應(yīng)用濾鏡效果。利用 result 存儲(chǔ)別的濾鏡的輸出可以實(shí)現(xiàn)這一點(diǎn)，然后在一個(gè) <feMergeNode> 子元素中訪問(wèn)它。

• <feMergeNode in="offsetBlur" /> 表示了上述兩個(gè)濾鏡的最終輸出結(jié)果 offsetBlur，也就是陰影的部分

• <feMergeNode in="SourceGraphic" /> 中的 in="SourceGraphic" 關(guān)鍵詞表示圖形元素自身將作為 <filter> 原語(yǔ)的原始輸入

整體再遵循后輸入的層級(jí)越高的原則，最終得到上述結(jié)果。示意流程圖如下：

至此，基本就掌握了 SVG 濾鏡的工作原理，及多個(gè)濾鏡如何搭配使用。接下來(lái)，只需要搞懂不同的濾鏡能產(chǎn)生什么樣的效果，有什么不同的屬性，就能大致對(duì) SVG  濾鏡有個(gè)基本的掌握!

關(guān)于 SVG 濾鏡還需要知道的

上面大致過(guò)了一下 SVG 濾鏡的使用流程，過(guò)程中提到了一些屬性，可能也漏掉了一些屬性的講解，本章節(jié)將補(bǔ)充說(shuō)明一下。

濾鏡標(biāo)簽通用屬性

有一些屬性是每一個(gè)濾鏡標(biāo)簽都有，都可以進(jìn)行設(shè)置的。

in 屬性的 6 個(gè)取值

SVG filter 中的 in 屬性，指定濾鏡效果的輸入源，可以是某個(gè)濾鏡導(dǎo)出的 result，也可以是下面 6 個(gè)值：

• 后 4 個(gè)基本用不上~

• 后面 4 個(gè)不太常用。

更多 SVG 濾鏡介紹講解

上面已經(jīng)提到了幾個(gè)濾鏡，我們簡(jiǎn)單回顧下：

• <feGaussianBlur > - 模糊濾鏡

• <feOffset > - 位移濾鏡

• <feMerge> - 多濾鏡疊加濾鏡

接下來(lái)再介紹一些比較常見(jiàn)，有意思的 SVG 濾鏡。

feBlend 濾鏡

<feBlend> 為混合模式濾鏡，與 CSS 中的混合模式相類似。

在 CSS 中，我們有混合模式 mix-blend-mode 和 background-blend-mode 。我有過(guò)非常多篇關(guān)于 CSS  混合模式相關(guān)的一些應(yīng)用。如果你還不太了解 CSS 中的混合模式，可以先看看這幾篇文章：

• 不可思議的混合模式 mix-blend-mode[3]

• 不可思議的混合模式 background-blend-mode[4]

• CSS奇思妙想 -- 使用 background 創(chuàng)造各種美妙的背景[5]

SVG 中的混合模式種類比 CSS 中的要少一些，只有 5 個(gè)，其作用與 CSS 混合模式完全一致：

• normal &mdash; 正常

• multiply &mdash; 正片疊底

• screen &mdash; 濾色

• darken &mdash; 變暗

• lighten&mdash; 變亮

簡(jiǎn)單一個(gè) Demo，我們有兩張圖，利用不同的混合模式，可以得到不一樣的混合結(jié)果 ：

<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); }

這里還用到了一個(gè) <feImage> 濾鏡，它的作用是提供像素?cái)?shù)據(jù)作為輸出，如果外部來(lái)源是一個(gè) SVG 圖像，這個(gè)圖像將被柵格化。

上述運(yùn)用了 feBlend 濾鏡中的 mode="lighten" 后的結(jié)果，兩個(gè)圖像疊加作用了 lighten 混合模式：

看看全部 5 種混合模式的效果：

CodePen Demo -- SVG Filter  feBlend  Demo[6]

feColorMatrix

<feColorMatrix> 濾鏡也是 SVG 濾鏡中非常有意思的一個(gè)濾鏡，顧名思義，它的名字中包含了矩陣這個(gè)單詞，表示該濾鏡基于轉(zhuǎn)換矩陣對(duì)顏色進(jìn)行變換。每一像素的顏色值(一個(gè)表示為[紅,綠,藍(lán),透明度] 的矢量) 都經(jīng)過(guò)矩陣乘法 (matrix multiplated) 計(jì)算出的新顏色。

這個(gè)濾鏡稍微有點(diǎn)復(fù)雜，我們一步一步來(lái)看。

<feColorMatrix> 濾鏡有 2 個(gè)私有屬性 type 和 values，type 它支持 4 種不同的類型：saturate | hueRotate | luminanceToAlpha | matrix，其中部分與 CSS Filter 中的一些濾鏡效果類似。

在這里，我做了一個(gè)簡(jiǎn)單的關(guān)于 <feColorMatrix> 前 3 個(gè)屬性 saturate | hueRotate | luminanceToAlpha 的效果示意 DEMO -- CodePen - feColorMatrix Demo[7]，可以感受下它們的具體的效果：

saturate、hueRotate 濾鏡和 CSS 中的 filter 中的 saturate、hue-rotate 的作用是一模一樣的。

feColorMatrix 中的 type=matrix

feColorMatrix 中的 type=matrix 理解起來(lái)要稍微更復(fù)雜點(diǎn)，它的 values 需要傳入一個(gè) 4x5 的矩陣。

像是這樣：

<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>

要理解如何運(yùn)用這些填寫(xiě)矩陣，就不得不直面另外一個(gè)問(wèn)題 -- 圖像的表示。

數(shù)字圖像的本質(zhì)是一個(gè)多維矩陣。在圖像顯示時(shí)，我們把圖像的 R 分量放進(jìn)紅色通道里，B 分量放進(jìn)藍(lán)色通道里，G  分量放進(jìn)綠色通道里。經(jīng)過(guò)一系列處理，顯示在屏幕上的就是我們所看到的彩色圖像了。

而 feColorMatrix 中的 matrix 矩陣，就是用來(lái)表示不同通道的值每一個(gè)分量的值，最終通過(guò)計(jì)算得到我們熟知的 rgba() 值。

計(jì)算邏輯為：

/* 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

中文的文章，對(duì) feColorMatrix 的 matrix 講解最好的應(yīng)該就是大漠老師的這篇 --  詳解feColorMatrix[8]，對(duì)具體的表示法感興趣的可以看看。

僅僅是使用的話，這里還有一個(gè)可視化的 DEMO -- CodePen - feColorMatrix Demo[9]，幫助大家理解記憶：

到目前為止，大部分 SVG 濾鏡的展示講解都是 CSS 現(xiàn)有能力能夠?qū)崿F(xiàn)的，那 SVG 濾鏡的獨(dú)特與魅力到底在哪呢?有什么是 CSS  能力無(wú)法做到的么?下面來(lái)看看另外幾個(gè)有意思的 SVG 濾鏡。

feSpecularLighting/feDiffuseLighting 光照濾鏡

feSpecularLighting 與 feDiffuseLighting  都意為光照濾鏡，使用它們可以照亮一個(gè)源圖形，不同的是，feSpecularLighting 為鏡面照明，而 feDiffuseLighting  為散射光照明。

• feDiffuseLighting：來(lái)自外部光源，適合模擬太陽(yáng)光或者燈光照明

• feSpecularLighting：指定從反射面反射的二次光

簡(jiǎn)單看其中一個(gè) Demo，代碼看著有點(diǎn)多，但是一步一步也很好理解：

<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); }

左邊是原圖，右邊是應(yīng)用了光照濾鏡之后的效果。

CodePen - feSpotLight SVG Light Source[10]

feMorphology 濾鏡

feMorphology 為形態(tài)濾鏡，它的輸入源通常是圖形的 alpha 通道，用來(lái)它的兩個(gè)操作可以使源圖形腐蝕(變薄)或擴(kuò)張(加粗)。

使用屬性 operator 確定是要腐蝕效果還是擴(kuò)張效果。使用屬性 radius 表示效果的程度，可以理解為筆觸的大小。

• operator：erode 腐蝕模式，dilate 為擴(kuò)張模式，默認(rèn)為 erode

• radius：筆觸的大小，接受一個(gè)數(shù)字，表示該模式下的效果程度，默認(rèn)為 0

我們將這個(gè)濾鏡簡(jiǎn)單的應(yīng)用到文字上看看效果：

<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); }

效果如下：最左邊的是正常文字，中間的是擴(kuò)張的模式，右邊的是腐蝕模式，看看效果，非常好理解：

當(dāng)然，我們還可以將其運(yùn)用在圖片之上，這時(shí)，并非是簡(jiǎn)單的讓圖像的筆觸變粗或者變細(xì)，

• 對(duì)于 erode 模式，會(huì)將圖片的每一個(gè)像素向更暗更透明的方向變化，

• 而 dilate 模式，則是將每個(gè)向像素周圍附近更亮更不透明的方向變化

簡(jiǎn)單看個(gè)示例動(dòng)畫(huà) DEMO，我們有兩張圖，分別作用 operator="erode" 和 operator="dilate"，并且動(dòng)態(tài)的去改變它們的  radius，其中一個(gè)的代碼示意如下：

<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>

上圖左邊是擴(kuò)張模式，右邊是腐蝕模式：

CodePen Demo -- SVG feMorphology Animation[11]

feTurbulence 濾鏡

turbulence 意為湍流，不穩(wěn)定氣流，而 SVG<feTurbulence>濾鏡能夠?qū)崿F(xiàn)半透明的煙熏或波狀圖像。通常用于實(shí)現(xiàn)一些特殊的紋理。濾鏡利用 Perlin  噪聲函數(shù)創(chuàng)建了一個(gè)圖像。噪聲在模擬云霧效果時(shí)非常有用，能產(chǎn)生非常復(fù)雜的質(zhì)感，利用它可以實(shí)現(xiàn)了人造紋理比如說(shuō)云紋、大理石紋的合成。

有了 feTurbulence，我們可以自使用 SVG 創(chuàng)建紋理圖形作為置換圖，而不需要借助外部圖形的紋理效果，即可創(chuàng)建復(fù)雜的圖形效果。

這個(gè)濾鏡，我個(gè)人認(rèn)為是 SVG 濾鏡中最有意思的一個(gè)，因?yàn)樗试S我們自己去創(chuàng)造出一些紋理，并且疊加在其他效果之上，生成出非常有意思的動(dòng)效。

feTurbulence 有三個(gè)屬性是我們特別需要注意的：type、baseFrequency、numOctaves：

1.type：實(shí)現(xiàn)的濾鏡的類型，可選fractalNoise 分形噪聲，或者是 turbulence 湍流噪聲。

• fractalNoise：分形噪聲更加的平滑，它產(chǎn)生的噪聲質(zhì)感更接近云霧

• turbulence：湍流噪聲

2.baseFrequency：表示噪聲函數(shù)的基本頻率的參數(shù)，頻率越小，產(chǎn)生的圖形越大，頻率越大，產(chǎn)生的噪聲越復(fù)雜其圖形也越小越精細(xì)，通常的取值范圍在  0.02 ~ 0.2

3.numOctaves：表示噪聲函數(shù)的精細(xì)度，數(shù)值越高，產(chǎn)生的噪聲更詳細(xì)。默認(rèn)值為1

這里有一個(gè)非常好的網(wǎng)站，用于示意 feTurbulence 所產(chǎn)生的兩種噪聲的效果：http://apike.ca/ -  feTurbulence[12]

兩種噪聲的代碼基本一致，只是 type 類型不同：

同時(shí)，baseFrequency 允許我們傳入兩個(gè)值，我們可以只改變某一方向上的頻率，具體的你可以戳這個(gè) Demo 看看：CodePen --  feTurbulence baseFrequency & numOctaves[13]

單單一個(gè)<feTurbulence>濾鏡其實(shí)是比較難搞懂這濾鏡想干什么的，需要將這個(gè)濾鏡作為紋理或者輸入，和其他濾鏡一起搭配使用，實(shí)現(xiàn)一些效果，下面我們來(lái)看看：

使用 feTurbulence 濾鏡實(shí)現(xiàn)文字流動(dòng)的效果

首先，嘗試將 feTurbulence 所產(chǎn)生的紋理和文字相結(jié)合。

簡(jiǎn)單的代碼如下：

<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); }

左邊是正常的效果，后邊是應(yīng)用了的效果，你可以試著點(diǎn)進(jìn) Demo，更改 baseFrequency 和 numOctaves  參數(shù)的大小，可以看到不同的效果：

CodePen Demo -- feTurbulence text demo[14]

feDisplacementMap 映射置換濾鏡

上面的 Demo 還用到了 feDisplacementMap 濾鏡，也需要簡(jiǎn)單的講解下。

feDisplacementMap 為映射置換濾鏡，想要用好這個(gè)濾鏡不太容易，需要掌握非常多的關(guān)于 PhotoShop  紋理創(chuàng)建或者是圖形色彩相關(guān)的知識(shí)。該濾鏡用來(lái)自圖像中從 in2 的輸入值到空間的像素值置換圖像從 in 輸入值到空間的像素值。

說(shuō)人話就是 feDisplacementMap 實(shí)際上是用于改變?cè)睾蛨D形的像素位置的。該濾鏡通過(guò)遍歷原圖形的所有像素點(diǎn)，使用  feDisplacementMap 重新映射到一個(gè)新的位置，形成一個(gè)新的圖形。

在上述的 feTurbulence 濾鏡與文字的結(jié)合使用中，我們通過(guò) feTurbulence 噪聲得到了噪聲圖形，然后通過(guò)  feDisplacementMap 濾鏡根據(jù) feTurbulence 所產(chǎn)生的噪聲圖形進(jìn)行形變，扭曲，液化，得到最終的效果。

在 MDN[15]上有這個(gè)濾鏡轉(zhuǎn)化的一個(gè)公式(感興趣的可以研究下，我啃不動(dòng)了)：

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

使用 feTurbulence 濾鏡實(shí)現(xiàn)褶皺紙張的紋理

好，我們繼續(xù) feTurbulence ，使用這個(gè)濾鏡，我們可以生成各種不同的紋理，我們可以嘗試使用 feTurbulence  濾鏡搭配光照濾鏡實(shí)現(xiàn)褶皺的紙張紋理效果，代碼也非常少：

<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[16]

你可以在 Sara Soueidan[17]的一次關(guān)于 SVG Filter 的分享上，找到制作它的教程：Youtube -- SVG Filters  Crash Course[18]

使用 feTurbulence 濾鏡實(shí)現(xiàn)按鈕hover效果

使用 feTurbulence 濾鏡搭配 feDisplacementMap 濾鏡，還可以制作一些非常有意思的按鈕效果。

嘗試實(shí)現(xiàn)一些故障風(fēng)格的按鈕，其中一個(gè)按鈕的代碼如下：

<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); }

通過(guò) hover 按鈕的時(shí)候，給按鈕添加濾鏡效果，并且濾鏡本身帶有一個(gè)無(wú)限循環(huán)的動(dòng)畫(huà)：

完整的代碼你可以戳這里：CodePen Demo - SVG Filter Button Effects[19]

使用 feTurbulence 濾鏡實(shí)現(xiàn)云彩效果

最后，我們回到題圖上的云彩效果，使用 feTurbulence 濾鏡，我們可以非常逼真的使用 SVG 模擬出真實(shí)的云彩效果。

首先，通過(guò)隨機(jī)生成的多重 box-shadow，實(shí)現(xiàn)這一一個(gè)圖形：

<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 }

這個(gè)工作，你可以交給 SASS、LESS 或者 JavaScript 這些能夠有循環(huán)函數(shù)能力的語(yǔ)言去生成，它的效果大概是這樣：

緊接著，通過(guò) feTurbulence 產(chǎn)生分形噪聲圖形，使用 feDisplacementMap 進(jìn)行映射置換，最后給圖形疊加上這個(gè)濾鏡效果。

<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)[20]

總結(jié)一下

關(guān)于 SVG 濾鏡入門(mén)的第一篇總算差不多了，本文簡(jiǎn)單的介紹了一下 SVG 濾鏡的使用方式以及一些常見(jiàn)的 SVG  濾鏡并給出了最簡(jiǎn)單的一些使用效果，希望大家看完能對(duì) SVG 濾鏡有一個(gè)簡(jiǎn)單的認(rèn)識(shí)。

本文羅列的濾鏡效果更多的是單個(gè)效果或者很少幾個(gè)組合在一起的效果，實(shí)際的使用或者應(yīng)用到應(yīng)用場(chǎng)景下其實(shí)會(huì)是更多濾鏡的的組合產(chǎn)生出的一個(gè)效果。

后面的文章將會(huì)更加細(xì)致的去探討分析多個(gè) SVG 濾鏡組合效果，探討更復(fù)雜的排列組合。

文章的題目叫SVG 濾鏡從入門(mén)到放棄因?yàn)?SVG 濾鏡學(xué)起來(lái)確實(shí)太繁瑣太累了，它不像 CSS 濾鏡或者混合模式那么容易上手那么簡(jiǎn)單。當(dāng)然也由于 SVG  濾鏡的功能非常強(qiáng)大，定制化能力強(qiáng)以及它已經(jīng)存在了非常之久有關(guān)。SVG 濾鏡的兼容性也很好，它們其實(shí)是早于 CSS3 一些特殊效果之前就已經(jīng)存在的。

CSS 其實(shí)一直在向 SVG 的一些特殊能力靠攏，用更簡(jiǎn)單的語(yǔ)法讓人更易上手，不過(guò) SVG 濾鏡還是有其獨(dú)特的魅力所在。后續(xù)將會(huì)有更多關(guān)于 SVG  濾鏡的文章。也希望讀到這里的同學(xué)不要放棄!

到此，關(guān)于“什么是 SVG 濾鏡”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

文章標(biāo)題：什么是SVG濾鏡
網(wǎng)頁(yè)路徑：http://bm7419.com/article14/pcihde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、定制網(wǎng)站、服務(wù)器托管、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)