SVG 滤镜介绍

SVG 滤镜：添加特殊效果

什么是 SVG 滤镜？

SVG 滤镜允许你对 SVG 元素应用各种图形效果。这些效果包括模糊、颜色操作、光照、纹理生成等等。滤镜在 <defs> 元素内定义，然后使用 filter 属性应用于 SVG 图形。

浏览器支持

SVG 滤镜在所有现代 Web 浏览器中都得到了广泛支持。要获取详细、最新的浏览器兼容性信息，建议查阅 MDN Web Docs 或 CanIUse.com 等资源。

SVG 滤镜的关键概念和元素

滤镜通过将一个或多个滤镜原语（filter primitive）链接在一起来构建。每个原语执行特定的图形操作。一个原语的输出可以用作另一个的输入，从而实现复杂效果。

滤镜定义在 <filter> 元素内部，该元素通常放置在 <defs> (definitions，定义) 块内。<filter> 元素需要一个 id 属性以便引用。

常用滤镜原语：

• <feGaussianBlur>：对输入图像应用模糊效果。
• <feOffset>：移动输入图像，常用于创建阴影。
• <feMerge>：合并多个输入层（例如，原始图形及其阴影）。包含 <feMergeNode> 子元素。
• <feColorMatrix>：使用矩阵执行颜色变换（例如，深褐色调、灰度、色相旋转）。
• <feBlend>：使用各种混合模式（例如，multiply、screen）混合两个输入图像。
• <feComposite>：执行两个输入图像的逐像素组合。
• <feImage>：允许使用外部图像或另一个 SVG 图形作为输入。
• <feFlood>：使用指定的颜色和不透明度填充滤镜子区域。
• <feTurbulence>：生成 Perlin 噪声，有助于创建云朵或大理石等纹理。
• <feDisplacementMap>：使用另一图像的像素数据扭曲图像。
• <feDiffuseLighting> 和 <feSpecularLighting>：创建光照效果，与 <fePointLight>、<feDistantLight>、<feSpotLight> 等光源元素一起使用。

提示：你可以在一个 <filter> 元素内应用多个滤镜原语，甚至可以链接多个滤镜。然而，复杂的滤镜可能计算量很大，因此请测试性能。

实际应用：

滤镜用于增强视觉吸引力、创建纹理、模拟深度（如阴影）、应用艺术效果等等。它们是处理高级 SVG 图形的强大工具。

以下章节将通过实际示例演示其中一些滤镜效果。