iT邦幫忙

DAY 24
1

SVG 30 天 ~ 就要醬玩系列 第 24

Day24 - 初探 SVG filter

前面二十幾篇的 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 FiltersFilter 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 :創建震盪與紋理


上一篇
Day23 - SVG + CSS 製作 Material Design 進度條
下一篇
Day25 - SVG filter - feColorMatrix
系列文
SVG 30 天 ~ 就要醬玩31

尚未有邦友留言

立即登入留言