SVG 濾鏡簡介
SVG 濾鏡
SVG 濾鏡用於為 SVG 圖形新增特殊效果。
所有 SVG 濾鏡都定義在 <defs> 元素中。<defs> 元素是“定義”的縮寫，包含特殊元素的定義（如濾鏡）。
使用 <filter> 元素定義 SVG 濾鏡。<filter> 元素有一個必需的 id 屬性，用於標識濾鏡。然後，圖形/影像會引用該濾鏡來使用。
接下來，在 <filter> 元素內部，我們放置一個或多個要應用於圖形的濾鏡效果（請參閱下表瞭解濾鏡效果元素的列表）。
快速示例
這裡我們使用 <feGaussianBlur> 濾鏡來模糊 SVG 圖形
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>
自己動手試一試 »
SVG 濾鏡效果元素
SVG 中可用的濾鏡有：
| 名稱 | 描述 |
|---|---|
| <feBlend> | 透過某種混合模式將兩個圖形組合在一起 |
| <feColorMatrix> | 基於轉換矩陣改變顏色 |
| <feComponentTransfer> | 對每個畫素執行分量重對映。可以調整亮度、對比度、色彩平衡等。 |
| <feComposite> | 使用合成操作在影像空間中逐畫素地組合兩個輸入影像 |
| <feConvolveMatrix> | 應用矩陣卷積濾鏡效果（包括模糊、邊緣檢測、銳化、浮雕和斜面） |
| <feDiffuseLighting> | 使用 alpha 通道作為凸起圖來照亮圖形 |
| <feDisplacementMap> | 使用 in2 屬性的圖形中的畫素值來置換 in 屬性的影像 |
| <feDistantLight> | 指定一個遠距離光源，用於照明濾鏡原語：<feDiffuseLighting> 或 <feSpecularLighting> |
| <feDropShadow> | 建立圖形的陰影 |
| <feFlood> | 使用 flood-color 和 flood-opacity 屬性定義的顏色和不透明度填充濾鏡子區域 |
| <feGaussianBlur> | 模糊圖形 |
| <feImage> | 從外部源獲取圖形資料，並提供畫素資料作為輸出 |
| <feMerge> | 混合輸入圖形層（併發應用濾鏡效果，而不是順序應用） |
| <feMergeNode> | 將另一個濾鏡的結果供其父級 <feMerge> 處理 |
| <feMorphology> | 侵蝕或膨脹圖形（用於加粗或變細效果） |
| <feOffset> | 偏移輸入圖形 |
| <fePointLight> | 指定一個光源，用於建立點光效果 |
| <feSpecularLighting> | 使用 alpha 通道作為凸起圖來照亮源圖形 |
| <feSpotLight> | 指定一個光源，用於建立聚光燈效果 |
| <feTile> | 使用輸入圖形的重複圖案填充目標矩形 |
| <feTurbulence> | 使用 Perlin 湍流函式建立圖形 |
提示： 您可以在每個 SVG 元素上使用多個濾鏡效果！
在接下來的章節中，我們將只展示可能實現的濾鏡效果的一小部分，並讓您瞭解 SVG 的功能！
