将 CSS 过滤器与 SVG 一起使用的完整指南

滤镜在摄影中非常流行。您几乎可以在每个照片编辑应用程序或网站上找到它们，并且一些相机具有内置的过滤器选项，因此您以后不必编辑照片。

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？

SVG 或 Scalable Vector Graphics 是一种基于 XML 的矢量图像格式，用于显示二维图形。XML 是另一个花哨的首字母缩写词，代表可扩展标记语言。XML 用于存储和传输数据，并定义您的标签。

回到 SVG。SVG 兼作图像和文档格式。JPEG 和 PNG 等常规图像格式由放大时通常会丢失质量的像素组成。

SVG 的不同之处在于，无论您放大多少，它们都能保持质量。这是可能的，因为它们是由数学公式组成的。

让我们看看 SVG 的底层是什么。

首先，在代码编辑器中打开 SVG 图像。这是您可能会发现的屏幕截图：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

---

这段代码构成了一个复杂的形状。我们可以在代码行中控制图像的颜色、大小和其他特征。让我们创建一个更简单的形状，一个圆形：

<正文>
  <svg width="400" height="400">
    <circle cx="200" cy="200" r="100" fill="#553c9a">
  </svg>
</正文>

我们有一个紫色的圆圈！

stroke我们可以通过添加一个值将这个圆圈变成一个环。描边是边框，我们可以将fill颜色设置为transparent。

<正文>
  <svg width="400" height="400">
    <circle cx="200" cy="200" r="100" fill="透明"
    stroke="#553c9a" stroke-width="20px">
  </svg>
</正文>

结果是这样的：

可以通过组合不同的 SVG 来创建复杂的图像。SVG 用于图标、徽标或作为背景图像。他们也可以动画！

使用带有 SVG 的 CSS 过滤器

CSS 过滤器主要限于图像，并且相当容易使用。另一方面，SVG 过滤器可以应用于图像（SVG 和其他格式）、文本和所有其他 HTML 元素。CSS 过滤器实际上是 SVG 过滤器的一个子集。

SVG 过滤器使用<filter>元素和一组称为过滤器原语的函数。这些函数是创建效果的子元素。

<filter>CSS属性将filter通过id.

过滤基元

首先，创建一个svg元素，其中filter嵌套了一个元素。然后，在图像之前添加基元（或您希望应用过滤器的任何元素）。

有 17 个过滤器原语，它们是：

1. feGaussianBlur

2. feDropShadow

3. feMorphology

4. feTurbulence

5. feDisplacementMap

6. feColorMatrix

7. feConvolveMatrix

8. feComponentTransfer

9. feOffset

10. feMerge

11. feFlood

12. feComposite

13. feImage

14. feBlend

15. feDiffuseLighting

16. feSpecularLighting

17. feTile

“fe”代表过滤效果。从名称中，我们可以了解它们会产生什么效果。让我们看一个基本的 SVG 过滤器语法：

<svg>
   <过滤器id="">
   <!--Filter Primitives go in here-->
   </过滤器>
</svg>

每个 SVG 原语都有自己独特的一组属性，用于创建效果。其中一些过滤器原语可以自己正常工作，但有些必须与其他原语结合使用。

有很多东西要讲，所以让我们开始吧。

---

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay

• 使用 React 的 useEffect优化应用程序的性能

• 在多个 Node 版本之间切换

• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri，一个用于构建二进制文件的新框架

• 比较NestJS 与 Express.js

• 发现TypeScript 领域中使用的流行 ORM

---

feGaussianBlur

SVG 是基于数学公式的，所以使用高斯模糊滤镜是正确的。该滤镜以已故数学家卡尔·弗里德里希·高斯的名字命名，并应用数学函数来模糊图像。

首先，您需要一张图片。这是来自freepik.com的一个：

接下来，我们将在 HTML 文件中创建 SVG 语法：

<svg>
  <filter id="模糊">
    <feGaussianBlur stdDeviation="5" in="SourceGraphic" result="BLUR"></feGaussianBlur>
  </过滤器>
    <图片
       xlink:href="2833.jpg" filter="url(#blur)"></image>
</svg>

现在，我们将feGaussianBlur在filter元素中添加 SVG 过滤器原语。图元内部的一些属性会对产生的模糊产生影响。

第一个属性是stdDeviation，它调节模糊量。

接下来是in，对于输入，它定义了过滤器的应用位置。在这种