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 的功能有所了解！
