SVG 研究之路 (10) - 初探 filter

這篇主要探討 SVG 的濾鏡:filter,是 SVG 裏頭比較少人著墨的地方,但卻也是可以讓圖形變化最大的地方,濾鏡不外乎像高斯模糊、混合、色彩變換...等,在我們使用繪圖軟體的時候,濾鏡是最常用到的功能之一,隨著瀏覽器的進步,幾乎所有的瀏覽起都支援 SVG 的濾鏡了,但是濾鏡牽涉到太多演算法,例如什麼純量乘積、阿達馬乘積...等,我實在也還沒搞懂,所以這篇先將濾鏡表列出來,之後再來慢慢研究。

定義濾鏡

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

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

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

濾鏡列表

因為在 chrome 上實測仍然有很多濾鏡效果不支援 ( IE 竟然支援... ),實際上要用,可能就真的要花點心思去測試了,不然真的做完發現不支援,還真是糗很大...如果對濾鏡有興趣,可以閱讀這幾篇文章:W3C SVG FiltersFilter Effects in SVG,以下是濾鏡的列表:

有興趣瞧瞧其他新文章嗎?