前面二十幾篇的 SVG 文章已經涵蓋了 SVG 的基本用法和觀念，接下來的幾天，將會開始介紹 SVG 的濾鏡 ( filter )，也將開始進入 SVG 奧妙魔幻的地帶，同樣的，因為魔幻，所以也比較少人著墨 ( 牽扯到太多圖學的知識 )，但也因為魔幻，所以 filter 也是可以讓圖形變化最大的地方。( oxxostudio.tw 同步發表：SVG 研究之路 (10) - 初探 filter )

濾鏡不外乎像高斯模糊、混合、色彩變換...等，在我們使用繪圖軟體的時候，濾鏡是最常用到的功能之一，但是濾鏡牽涉到太多演算法，例如什麼純量乘積、阿達馬乘積...等，現在甚至連 chrome 和 firefox 對 SVG 的濾鏡支援度也都不高 ( 結果 IE 竟然幾乎都支援是怎樣呀！？ )，所以這篇先將濾鏡表列出來，之後會一一介紹，不過三十天內應該是講不完，應該會繼續持續研究持續寫。^_^

一如往常，第一步，在<defs></defs>裏頭，加入<filter></filter>的標籤，然後給它一個 id 作為識別，接著就是要在filter裏頭放入濾鏡，在此之前，filter除了 x、y、width、height 幾個基本屬性外，也幾個比較特別的屬性需要設定：

1. filterUnits ："userSpaceOnUse | objectBoundingBox" ( 位置以 SVG 畫面為主，還是以套用的物件為主 )
2. primitiveUnits ： "userSpaceOnUse | objectBoundingBox" ( 預設 userSpaceOnUse )
3. filterRes ： 該屬性定義了中間緩存區域的大小，通常不需要提供

因此濾鏡的程式通常都會寫成：

  <defs>
    <filter id="id名" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
      濾鏡
    </filter>
  </defs>

因為在 chrome 上實測仍然有很多濾鏡效果不支援 ( IE 竟然支援... )，實際上要用，可能就真的要花點心思去測試了，不然真的做完發現不支援，還真是糗很大...如果對濾鏡有興趣，可以先閱讀這幾篇文章：W3C SVG Filters、Filter Effects in SVG，如果不想看英文，就可以等待我後續篇幅的介紹，或先上我的 blog 閱讀 ( 基本上三十天我已經寫完了 :p )，以下是濾鏡的列表：

●feBlend ：使用不同的混合模式把兩個對象合成在一起。
●feColorMatrix ：應用矩陣轉換。( Matrix multiplication )
●feComponentTransfer ：允許圖片由四個色彩通道重新定義
○feFuncA、feFuncB、feFuncG、feFuncR
●feComposite ：混合圖片，可以以百分比的方式進行混合
●feConvolveMatrix ：透過矩陣運算，做出模糊，邊緣檢測，銳化，浮雕和斜角...等效果。
●feDiffuseLighting ：使用 alpha channel 計算凹凸
●feDisplacementMap ：置換每一英吋的圖像
●feDistantLight ：定義光源
○fePointLight、feSpecularLighting、feSpotLight
●feFlood ：重新繪製矩形並和其他物件結合
●feGaussianBlur ：高斯模糊
●feImage ：插入一張圖片成為濾鏡
●feMerge ：不同濾鏡的組合 ( merge )
○feMergeNode
○feMorphology
●feOffset ：移動套用濾鏡的物件位置位置
●feTile ：讓圖像以重複模式進入濾鏡
●feTurbulence ：創建震盪與紋理