SVG 濾鏡
SVG 允許我們使用與點陣圖描述語言類似的工具，例如陰影、模糊效果，甚至合併不同濾鏡的結果。透過 <filter> 元素，可以新增這些效果並稍後將它們附加到物件上。
濾鏡的作用類似於圖層。建立它們時，請嘗試逐步應用和測試效果。
此元素具有不同的屬性，可幫助我們建立剪輯區域。在 filter 標籤之間，我們可以定義允許我們實現所需效果的基元。這些基元之一是 <feGaussianBlur>。關鍵字 SourceAlpha 標識此基元的輸入，在本例中為 in 輸入。模糊量透過 stdDeviation 屬性進行設定。
SVG 濾鏡示例
html
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
</filter>
</defs>
<g id="ghost" filter="url(#drop-shadow)">
<!--Ghost drawing in here-->
</g>
上面的示例不會產生期望的輸出。相反，我們需要新增更多濾鏡基元來產生期望的渲染。透過新增 feoffset 和 result，可以定義效果圖層。
<result> 屬性是一個可供以後引用的引用。它與 XML ID 有很大不同，並且只能在實際的 filter 內部引用。<feoffset> 基元具有高斯模糊的模糊結果。<feMerge> 基元包含 <feMergeNode> 節點，這些節點將 offsetBlur 的結果作為輸入，這將允許它出現在 sourceGraphic 下方。
實現更多基元
html
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feoffset in="blur" dx="4" dy="4" result="offsetBlur" />
<feMerge>
<feMergeNode in="offsetBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>