SVG 滤镜：从入门到精通（第一部分：揭开滤镜神秘面纱）

前端

2023-12-19 17:18:08

SVG 滤镜简介

SVG 滤镜是一种用于对 SVG 图像进行图像处理的技术。滤镜可以应用于整个图像，也可以应用于图像的特定部分。滤镜可以创建各种各样的视觉效果，如模糊、锐化、颜色调整、扭曲等等。

滤镜容器

滤镜容器是滤镜应用的载体。滤镜容器可以是任何 SVG 元素，但最常见的是<svg>元素或<g>元素。滤镜容器中的所有元素都会受到滤镜的影响。

高斯滤镜

高斯滤镜是最常用的滤镜之一。高斯滤镜可以对图像进行模糊处理。高斯滤镜的参数是标准差，标准差越大，图像模糊程度越大。

滤镜的合成与叠加

滤镜可以组合使用来创建更复杂的视觉效果。滤镜的合成与叠加可以按照以下规则进行：

相加： 将两个滤镜的效果相加，得到新的滤镜效果。
相减： 将两个滤镜的效果相减，得到新的滤镜效果。
相乘： 将两个滤镜的效果相乘，得到新的滤镜效果。
叠加： 将两个滤镜的效果叠加在一起，得到新的滤镜效果。

局部模糊滤镜效果

局部模糊滤镜效果可以对图像的特定部分进行模糊处理。局部模糊滤镜效果可以使用高斯滤镜和蒙版来实现。蒙版可以定义模糊区域的形状。

示例：局部模糊滤镜效果

<svg width="400" height="300">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
    </filter>
  </defs>

  <image href="image.png" width="400" height="300"/>

  <mask id="mask">
    <circle cx="200" cy="150" r="100" fill="black"/>
  </mask>

  <image href="image.png" width="400" height="300" mask="url(#mask)"/>
</svg>