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 的功能！
