SVG 滤镜学习笔记

什么是 SVG 滤镜？

SVG（Scalable Vector Graphics）是一种基于 XML 的标准，用于描述二维矢量图形。滤镜是一种可用于 SVG 图形的特殊效果，它可以改变图形的外观或行为。

SVG 滤镜的种类

SVG 滤镜可以分为两类：

1. 模糊滤镜

模糊滤镜是一种可以使图形模糊的特殊效果。常见的模糊滤镜有高斯模糊和平均模糊。

高斯模糊实例

htmlCopy Code
<svg width="300" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  
  <rect x="50" y="50" width="200" height="100" fill="blue" filter="url(#blur)" />
</svg>

上面的代码会生成一个宽为 300px，高为 200px 的 SVG 元素，并使用了 feGaussianBlur 滤镜将一个蓝色的矩形进行高斯模糊处理。

2. 色彩滤镜

色彩滤镜是一种可以改变图形颜色的特殊效果。常见的色彩滤镜有灰度滤镜、反色滤镜和褐色滤镜。

灰度滤镜实例

htmlCopy Code
<svg width="300" height="200">
  <defs>
    <filter id="gray">
      <feColorMatrix type="matrix" values=".3 .3 .3 0 0 .3 .3 .3 0 0 .3 .3 .3 0 0 0 0 0 1 0" />
    </filter>
  </defs>
  
  <rect x="50" y="50" width="200" height="100" fill="blue" filter="url(#gray)" />
</svg>

上面的代码会生成一个宽为 300px，高为 200px 的 SVG 元素，并使用了 feColorMatrix 滤镜将一个蓝色的矩形进行灰度处理。

总结

SVG 滤镜是一种可以改变图形外观或行为的特殊效果，它可以分为模糊滤镜和色彩滤镜两类。通过掌握 SVG 滤镜的基本用法，我们可以创造出更加丰富多彩的 SVG 图形。