滤镜在摄影中非常流行。您几乎可以在每个照片编辑应用程序或网站上找到它们，并且一些相机具有内置的过滤器选项，因此您以后不必编辑照片。
CSS 有几个过滤器可以帮助改善网站的视觉效果。您可以使用该filter属性将它们直接应用于 Web 元素，也可以将它们应用于具有该属性的元素后面的区域backdrop-filter。
使用这些滤镜，您可以模糊图像、调整对比度和饱和度、更改色调、降低不透明度等等！
在这篇文章中，我们将专门学习一组独特而强大的工具：SVG 过滤器。但在我们继续之前，让我们对 SVG 做一些介绍。
什么是 SVG？
使用带有 SVG 的 CSS 过滤器
过滤基元
feGaussianBlur
feDropShadow
feMorphology
feTurbulence
feDisplacementMap
feColorMatrix
feConvolveMatrix
feComponentTransfer
feOffset
feMerge
feFlood
feComposite
feImage
feBlend
feDiffuseLighting
feSpecularLighting
feTile
浏览器支持
SVG 或 Scalable Vector Graphics 是一种基于 XML 的矢量图像格式，用于显示二维图形。XML 是另一个花哨的首字母缩写词，代表可扩展标记语言。XML 用于存储和传输数据，并定义您的标签。
回到 SVG。SVG 兼作图像和文档格式。JPEG 和 PNG 等常规图像格式由放大时通常会丢失质量的像素组成。
SVG 的不同之处在于，无论您放大多少，它们都能保持质量。这是可能的，因为它们是由数学公式组成的。
让我们看看 SVG 的底层是什么。
首先，在代码编辑器中打开 SVG 图像。这是您可能会发现的屏幕截图：
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →
这段代码构成了一个复杂的形状。我们可以在代码行中控制图像的颜色、大小和其他特征。让我们创建一个更简单的形状，一个圆形：
<正文>
我们有一个紫色的圆圈！
stroke我们可以通过添加一个值将这个圆圈变成一个环。描边是边框，我们可以将fill颜色设置为transparent。
<正文>
结果是这样的：
可以通过组合不同的 SVG 来创建复杂的图像。SVG 用于图标、徽标或作为背景图像。他们也可以动画！
CSS 过滤器主要限于图像，并且相当容易使用。另一方面，SVG 过滤器可以应用于图像（SVG 和其他格式）、文本和所有其他 HTML 元素。CSS 过滤器实际上是 SVG 过滤器的一个子集。
SVG 过滤器使用
首先，创建一个svg元素，其中filter嵌套了一个元素。然后，在图像之前添加基元（或您希望应用过滤器的任何元素）。
有 17 个过滤器原语，它们是：
feGaussianBlur
feDropShadow
feMorphology
feTurbulence
feDisplacementMap
feColorMatrix
feConvolveMatrix
feComponentTransfer
feOffset
feMerge
feFlood
feComposite
feImage
feBlend
feDiffuseLighting
feSpecularLighting
feTile
“fe”代表过滤效果。从名称中，我们可以了解它们会产生什么效果。让我们看一个基本的 SVG 过滤器语法：
每个 SVG 原语都有自己独特的一组属性，用于创建效果。其中一些过滤器原语可以自己正常工作，但有些必须与其他原语结合使用。
有很多东西要讲，所以让我们开始吧。
不要错过来自 LogRocket 的精选时事通讯The Replay
使用 React 的 useEffect优化应用程序的性能
在多个 Node 版本之间切换
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri，一个用于构建二进制文件的新框架
比较NestJS 与 Express.js
发现TypeScript 领域中使用的流行 ORM
SVG 是基于数学公式的，所以使用高斯模糊滤镜是正确的。该滤镜以已故数学家卡尔·弗里德里希·高斯的名字命名，并应用数学函数来模糊图像。
首先，您需要一张图片。这是来自freepik.com的一个：
接下来，我们将在 HTML 文件中创建 SVG 语法：
现在，我们将feGaussianBlur在filter元素中添加 SVG 过滤器原语。图元内部的一些属性会对产生的模糊产生影响。
第一个属性是stdDeviation，它调节模糊量。
接下来是in，对于输入，它定义了过滤器的应用位置。在这种