技術類文章

SVG 自學微筆記(07) - 圖形濾鏡

不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像是圖形模糊化、產生圖形陰影、將雜訊加入圖形等。以下介紹的是圖形模糊化、產生圖形陰影這2個濾鏡效果。

SVG : 濾鏡

(僅列出部分有使用到的屬性)

  • <svg></svg>

    • height : 整個圖形(畫布)的原始長度
    • width: 整個圖形(畫布)的原始寬度

  • <defs></defs>

    • defs是definitions(定義)的簡寫，用來存放SVG特殊元素的定義，像是filter

  • <filter></filter>

    • 濾鏡的本體，設定濾鏡套用後的實際效果
    • id: filter的名稱
    • x: filter的x坐標
    • y: filter的y坐標

    (也有width、height)

  • <rect></rect> 或 <rect />

    • …
    • filter: 要套用的濾鏡

範例1 - 套用模糊濾鏡


(左邊有套用濾鏡，右邊是原始圖形)

  • <feGaussianBlur></feGaussianBlur> 或 <feGaussianBlur />
    • in: 套用濾鏡效果的圖形來源
    • stdDeviation: 濾鏡的模糊程度
1
2
3
4
5
6
7
8
9
10
11
<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0">
             <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>
  1. feGaussianBlur的SourceGraphic表示將整個圖形來源(rect)都套用濾鏡
  2. filter=“url(#濾鏡名稱)”

範例2 - 產生陰影效果


(左邊有套用濾鏡，右邊是原始圖形)

  • <feOffset></feOffset> 或 <feOffset />

    • in: 套用濾鏡效果的圖形來源
    • dx: 圖形在x坐標上的位移
    • dy: 圖形在y坐標上的位移
    • result: 套用濾鏡後的結果名稱

  • <feBlend></feBlend> 或 <feBlend />

    • in: 套用濾鏡效果的圖形來源1
    • in2: 套用濾鏡效果的圖形來源2
    • mode: 圖形混和的模式

feOffset的功能是將原始圖形進行位移，feBlend的功能則是將位移後的圖形和原始圖形混和在一起。
如果filetr的width、height沒有設定的比rect大一些，會造成部分濾鏡陰影效果消失。

1
2
3
4
5
6
7
8
9
10
11
12
<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

範例3 - 產生陰影效果+陰影模糊化


(左邊有套用濾鏡，右邊是原始圖形)

可以把位移後的圖形結果(offOut)再套用模糊濾鏡，最後將模糊後的結果(blurout)與原始圖形(SourceGraphic)混和在一起。

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg height="300" width="400">
    <defs>
        <filter id="blur_effect" x="0" y="0" width="150px" height="150px">
            <feOffset result="offOut" in="SourceGraphic" dx="25" dy="25" />
            <feGaussianBlur in="offOut" result="blurout" stdDeviation="5" />
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
    </defs>
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" filter="url(#blur_effect)" />
    <rect width="100" height="100" stroke="gray" stroke-width="3" 
    fill="wheat" transform="translate(150,0)" />
</svg>

還有更複雜的濾鏡效果等待我們去發現(๑´ㅂ`๑) 。

參考資料

SVG Filters - W3Schools
一次搞懂SVG中所有常用的濾鏡

分享到