SVG 研究之路 (13) - filter - feGaussianBlur
使用過 Photoshop 都知道，模糊就跟斯斯一樣多種，其中的一種就是「高斯模糊」，同樣的，在 illustrator 裏頭也有高斯模糊，因此 SVG 也就擁有高斯模糊的能力！以往我們單純用網頁製作「假」的高斯模糊，常常是將十幾二十張圖片更改透明度與些微的座標差距，來做出類似的效果，這個方式其實在一些 3D 軟體做景深渲染的時候也常常使用，不過這種方法在網頁上必須撰寫一些程式才能辦到。今天有了 SVG 的 feGaussianBlur 濾鏡，我們只需要下幾個指令就能夠達到模糊的效果，且還能夠使用程式做互動的反應，是相當方便的喔！
參考：我以前做的效果
feGaussianBlur 簡介
feGaussianBlur應該算是 SVG filter 裏頭最簡單的濾鏡，因為它只有一個參數需要注意：stdDeviation，這也是控制模糊程度的參數，數字越大越模糊，數字為零則是圖片原本的狀態，在這邊有一個比較需要注意的地方，就是要記得設定 filter 的filterUnits為 userSpaceOnUse ，因為預設值是會讓 filter 跟隨著套用該 filter 的物件跑，所以要記得設定成跟隨整個 SVG space。
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="1" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="10" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />
feGaussianBlur的stdDeviation還有一個鮮為人知且相當好用的設定，就是可以撰寫兩個數值在裏頭，分別代表水平與垂直方向的模糊程度。
<filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" >
<feGaussianBlur stdDeviation="1 15"/>
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#ff4500" filter=url("#blur1") />
<filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" >
<feGaussianBlur stdDeviation="15 1"/>
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#ff4500" filter=url("#blur1") />
效果變化
理解了feGaussianBlur的用法之後，我們就可以利用它來做一些與眾不同的變化，例如：
不同的景深
<defs> <filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="10" /> </filter> <filter width="200" height="200" x="0" y="0" id="blur2" filterUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="2" /> </filter> <filter width="200" height="200" x="0" y="0" id="blur3" filterUnits="userSpaceOnUse"> <feGaussianBlur stdDeviation="0" /> </filter> </defs> <rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur1") /> <circle cx="100" cy="100" r="50" fill="#09a" filter=url("#blur2") /> <rect x="100" y="100" width="70" height="70" fill="#fa0" filter=url("#blur3") />![]()
陰影
陰影其實說好做很好做，就做一個黑色的色塊讓它模糊即可，不過這裡用了一個比較有趣的方法，就是讓濾鏡套用在物件的 Aplha 色版 ( in="SourceAlpha" )，如此一來也可以做出陰影。
<defs> <filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" > <feGaussianBlur stdDeviation="5" in="SourceAlpha" /> </filter> </defs> <rect x="30" y="35" width="70" height="70" fill="#f00" filter=url("#blur1") /> <rect x="30" y="30" width="70" height="70" fill="#6f9"/>![]()
不同形狀的陰影
<defs> <filter width="200" height="200" x="0" y="0" id="blur1" filterUnits="userSpaceOnUse" > <feGaussianBlur stdDeviation="5"/> </filter> </defs> <path d="M30 30 L100 30 Q90 65 100 100 L30 100 Q40 65 30 30" fill="#000" filter=url("#blur1") /> <rect x="30" y="30" width="70" height="70" fill="#6f9"/>![]()
小結
陰影的做法萬變不離其宗，跟我們以往使用 photoshop 和 illustrator 總是幾分類似，畢竟身為設計師，最拿手的也應該就是利用光影的變化來欺騙眼睛，學會了 SVG 的feGaussianBlur，相信一定能做出更多有趣的效果。