滤镜系列文章（二）：揭秘 feImage、feFlood、feOffset、feDropShadow、feColorMatrix 的妙用

2024-01-18 03:21:06

在上一篇文章中，我们介绍了几个常用的滤镜 feGaussianBlur、feComposite、feMorphology、feTile、feTurbulence。如果你还没看过，强烈推荐你阅读一下。

在本文中，我们将介绍另外几个常用的滤镜：feImage、feFlood、feOffset、feDropShadow、feColorMatrix。同样地，我们将结合示例来详细说明每个滤镜的使用方法。

feImage

feImage 滤镜允许你将一个图像作为滤镜效果的一部分。这可以用来创建一些非常有趣的效果，比如将一张照片变成一幅画，或者将一个物体变成另一个物体的形状。

<filter id="feImage">
  <feImage x="0" y="0" width="100%" height="100%" href="image.jpg" />
</filter>

这个例子将 image.jpg 作为滤镜效果的一部分。这会将图像叠加到元素上，并应用滤镜效果。

feFlood

feFlood 滤镜允许你用纯色填充元素。这可以用来创建一些非常简单的效果，比如改变元素的颜色，或者创建渐变效果。

<filter id="feFlood">
  <feFlood flood-color="red" />
</filter>

这个例子将元素填充为红色。

feOffset

feOffset 滤镜允许你将元素在 x 轴和 y 轴上偏移。这可以用来创建一些非常微妙的效果，比如给元素添加阴影，或者创建 3D 效果。

<filter id="feOffset">
  <feOffset dx="10" dy="10" />
</filter>

这个例子将元素在 x 轴上偏移 10 个单位，在 y 轴上偏移 10 个单位。

feDropShadow

feDropShadow 滤镜允许你给元素添加阴影。这可以用来创建一些非常逼真的效果，比如给按钮添加阴影，或者给文本添加阴影。

<filter id="feDropShadow">
  <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="black" />
</filter>

这个例子给元素添加了一个黑色的阴影。阴影在 x 轴上偏移 10 个单位，在 y 轴上偏移 10 个单位，标准偏差为 5 个单位。

feColorMatrix

feColorMatrix 滤镜允许你对元素的颜色进行各种调整。这可以用来创建一些非常复杂的效果，比如改变元素的色调、饱和度和亮度。

<filter id="feColorMatrix">
  <feColorMatrix type="matrix" values="0.3 0.5 0.2 0 0
                                      0.3 0.5 0.2 0 0
                                      0.3 0.5 0.2 0 0
                                      0 0 0 1 0" />
</filter>