什么是SVG滤镜效果 SVG filter的XML语法

SVG滤镜效果是通过元素定义的图像后处理操作，需在中声明并用filter属性引用，支持模糊、阴影等效果，由feGaussianBlur等原语组成，注意兼容性与性能。

SVG滤镜效果是通过 元素定义的一组图像处理操作，用于给 SVG 图形添加模糊、阴影、光照、色彩变换等视觉效果。它不是直接绘制图形，而是对已有图形（如 、）的像素进行后处理，类似 Photoshop 中的图层样式。

滤镜必须定义在 容器内，通过 id 标识，再用 filter="url(#id)" 应用到目标元素上。

---

基本XML语法结构

一个最简可用的 SVG 滤镜包含三部分：容器定义、滤镜声明、图形引用。

• ：包裹所有可复用资源（滤镜、渐变、图案等）
• ：定义滤镜本身，需设 id，常用属性有 x、y、width、height（控制滤镜作用区域范围，避免被裁剪）
• 、 等：滤镜原语（filter primitive），每个代表一种图像操作
• 目标图形元素（如 ）通过 filter 属性调用该滤镜

示例：给圆形加高斯模糊

svg width="200" height="200">
  
    
      
    
  
  

说明：

• in="SourceGraphic" 表示以原始图形为输入源
• stdDeviation 控制模糊强度，值越大越虚化
• x/y/width/height 扩展滤镜画布，默认只覆盖图形边界，模糊易被截断，建议设为 "-50%" 和 "200%"

---

常见滤镜原语与用途

每个 `` 标签实现一种基础图像操作，可串联组合：

• ：平移像素，常用于生成阴影偏移
• ：高斯模糊，制造柔边或景深感
• ：混合两个输入图层（如原图 + 偏移阴影）
• ：调整饱和度、灰度、对比度等
• ：按遮罩裁剪，实现文字镂空、蒙版效果

例如阴影效果 = 偏移 + 模糊 + 叠加：

  
  
  

---

关键注意事项

实际使用中容易忽略但影响效果和兼容性的要点：

• 浏览器支持不一致：IE 完全不支持；Safari 对部分原语（如 feDisplacementMap）支持有限；推荐优先测试 Chrome/Firefox/Edge
• 性能敏感：`` 计算开销大，`stdDeviation > 10` 在低端设备可能卡顿，动画中慎用
• 输入源选择很重要：in="SourceAlpha" 只取图形透明通道（适合做纯黑阴影），in="SourceGraphic" 是完整彩色图形
• CSS 与 SVG 滤镜可共存：比如先用 CSS 设置 `opacity`，再叠加 SVG 滤镜，但注意渲染顺序（CSS 层在 SVG 滤镜之前）