不定更新、可能爛尾XD
學習資源: W3Schools、其他網路資料
SVG有提供Filter(濾鏡)這個東西，可以用來在SVG圖形上加入特殊的效果，像是圖形模糊化、產生圖形陰影、將雜訊加入圖形等。以下介紹的是圖形模糊化、產生圖形陰影這2個濾鏡效果。
SVG : 濾鏡
- 範例1 - 套用模糊濾鏡
(左邊有套用濾鏡，右邊是原始圖形)
<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>
- feGaussianBlur的SourceGraphic表示將整個圖形來源(rect)都套用濾鏡
- filter=“url(#濾鏡名稱)”
- 範例2 - 產生陰影效果
(左邊有套用濾鏡，右邊是原始圖形)
feOffset的功能是將原始圖形進行位移，feBlend的功能則是將位移後的圖形和原始圖形混和在一起。如果filetr的width、height沒有設定的比rect大一些，會造成部分濾鏡陰影效果消失。
<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)混和在一起。
<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>
還有更複雜的濾鏡效果等待我們去發現(๑´ㅂ`๑) 。
參考資料
