有意思！強大的 SVG 濾鏡

ChokCoco發表於2021-03-25
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) 實現了一個類似的濾鏡，方便比較，結果圖如下：

image

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

我們先來看看整個濾鏡的最終結果，結果長這樣：

image

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 屬性，可以實現在前一個基本變換操作上建立另一個操作，比如我們的例子中就是新增模糊後又新增位移效果。

結合兩個濾鏡，產生的圖形效果，其實是這樣的：

image

實際效果中還出現了原圖，所以這裡我們還使用了 <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> 原語的原始輸入

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

image

至此，基本就掌握了 SVG 濾鏡的工作原理，及多個濾鏡如何搭配使用。接下來，只需要搞懂不同的濾鏡能產生什麼樣的效果，有什麼不同的屬性，就能大致對 SVG 濾鏡有個基本的掌握！

關於 SVG 濾鏡還需要知道的

上面大致過了一下 SVG 濾鏡的使用流程，過程中提到了一些屬性，可能也漏掉了一些屬性的講解，本章節將補充說明一下。

濾鏡標籤通用屬性

有一些屬性是每一個濾鏡標籤都有，都可以進行設定的。

屬性 作用
x, y 提供左上角的座標來定義在哪裡渲染濾鏡效果。 （預設值：0）
width, height 繪製濾鏡容器框的高寬（預設都為 100%）
result 用於定義一個濾鏡效果的輸出名字，以便將其用作另一個濾鏡效果的輸入（in）
in 指定濾鏡效果的輸入源，可以是某個濾鏡匯出的 result，也可以是下面 6 個值

in 屬性的 6 個取值

SVG filter 中的 in 屬性，指定濾鏡效果的輸入源，可以是某個濾鏡匯出的 result，也可以是下面 6 個值：

in 取值 作用
SourceGraphic 該關鍵詞表示圖形元素自身將作為 <filter> 原語的原始輸入
SourceAlpha 該關鍵詞表示圖形元素自身將作為 <filter> 原語的原始輸入。SourceAlpha 與 SourceGraphic 具有相同的規則除了 SourceAlpha 只使用元素的非透明部分
BackgroundImage 與 SourceGraphic 類似，但可在背景上使用。 需要顯式設定
BackgroundAlpha 與 SourceAlpha 類似，但可在背景上使用。 需要顯式設定
FillPaint 將其放置在無限平面上一樣使用填充油漆
StrokePaint 將其放在無限平面上一樣使用描邊繪畫

後 4 個基本用不上~

後面 4 個不太常用。

更多 SVG 濾鏡介紹講解

上面已經提到了幾個濾鏡，我們簡單回顧下：

  • <feGaussianBlur > - 模糊濾鏡
  • <feOffset > - 位移濾鏡
  • <feMerge> - 多濾鏡疊加濾鏡

接下來再介紹一些比較常見，有意思的 SVG 濾鏡。

feBlend 濾鏡

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

在 CSS 中，我們有混合模式 mix-blend-mode 和 background-blend-mode 。我有過非常多篇關於 CSS 混合模式相關的一些應用。如果你還不太瞭解 CSS 中的混合模式，可以先看看這幾篇文章：

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 影像，這個影像將被柵格化。

image

上述運用了 feBlend 濾鏡中的 mode="lighten" 後的結果，兩個影像疊加作用了 lighten 混合模式：

image

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

image

CodePen Demo -- SVG Filter feBlend Demo

feColorMatrix

<feColorMatrix> 濾鏡也是 SVG 濾鏡中非常有意思的一個濾鏡，顧名思義，它的名字中包含了矩陣這個單詞，表示該濾鏡基於轉換矩陣對顏色進行變換。每一畫素的顏色值(一個表示為[紅,綠,藍,透明度] 的向量) 都經過矩陣乘法 (matrix multiplated) 計算出的新顏色。

這個濾鏡稍微有點複雜，我們一步一步來看。

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

type 型別 作用 values 的取值範圍
saturate 轉換影像飽和度 0.0 - 1.0
hueRotate 轉換影像色相 0.0 - 360
luminanceToAlpha 阿爾法通道亮度（不知道如何翻譯 :sad） 只有一個效果，無需改變 values 的值
matrix 使用矩陣函式進行色彩變換 需要應用一個 4 x 5 的矩陣

在這裡，我做了一個簡單的關於 <feColorMatrix> 前 3 個屬性 saturate | hueRotate | luminanceToAlpha 的效果示意 DEMO -- CodePen - feColorMatrix Demo，可以感受下它們的具體的效果：

1gif

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

feColorMatrix 中的 type=matrix

feColorMatrix 中的 type=matrix 理解起來要稍微更復雜點，它的 values 需要傳入一個 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>

要理解如何運用這些填寫矩陣，就不得不直面另外一個問題 -- 影像的表示。

數字影像的本質是一個多維矩陣。在影像顯示時，我們把影像的 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，幫助大家理解記憶：

2

到目前為止，大部分 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);
}

左邊是原圖，右邊是應用了光照濾鏡之後的效果。

image

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

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

image

當然，我們還可以將其運用在圖片之上，這時，並非是簡單的讓影像的筆觸變粗或者變細，

  • 對於 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>

3

上圖左邊是擴張模式，右邊是腐蝕模式：

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 引數的大小，可以看到不同的效果：

image

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

效果如下：

image

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 這些能夠有迴圈函式能力的語言去生成，它的效果大概是這樣：

image

緊接著，通過 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);
}

即可得到這樣的雲彩效果：

image

完整的程式碼，你可以戳這裡到袁川老師的 CodePen 觀看：Cloud (SVG filter + CSS)

總結一下

關於 SVG 濾鏡入門的第一篇總算差不多了，本文簡單的介紹了一下 SVG 濾鏡的使用方式以及一些常見的 SVG 濾鏡並給出了最簡單的一些使用效果，希望大家看完能對 SVG 濾鏡有一個簡單的認識。

本文羅列的濾鏡效果更多的是單個效果或者很少幾個組合在一起的效果，實際的使用或者應用到應用場景下其實會是更多濾鏡的的組合產生出的一個效果。

後面的文章將會更加細緻的去探討分析多個 SVG 濾鏡組合效果，探討更復雜的排列組合。

文章的題目叫SVG 濾鏡從入門到放棄因為 SVG 濾鏡學起來確實太繁瑣太累了，它不像 CSS 濾鏡或者混合模式那麼容易上手那麼簡單。當然也由於 SVG 濾鏡的功能非常強大，定製化能力強以及它已經存在了非常之久有關。SVG 濾鏡的相容性也很好，它們其實是早於 CSS3 一些特殊效果之前就已經存在的。

CSS 其實一直在向 SVG 的一些特殊能力靠攏，用更簡單的語法讓人更易上手，不過 SVG 濾鏡還是有其獨特的魅力所在。後續將會有更多關於 SVG 濾鏡的文章。也希望讀到這裡的同學不要放棄！

參考資料

最後

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章