SVG的filter效果怎么做 XML滤镜教程

SVG的是纯声明式XML图像处理机制，通过定义唯一id的标签，组合feGaussianBlur等原语，在指定坐标系中对SourceGraphic等输入进行链式处理实现模糊、阴影、发光等效果。

SVG 的 是通过 XML 定义的一组图像处理操作，它不依赖 JavaScript，纯声明式，直接嵌入 SVG 或外部引用即可生效。核心在于理解滤镜坐标系、原图输入（SourceGraphic）、内置滤镜原语（如 、 等）以及它们的组合逻辑。

基础结构：定义一个可用的 filter

每个 filter 必须有唯一 id，并用 标签包裹。常用属性控制裁剪范围和分辨率：

• x、y、width、height：定义滤镜作用区域（默认是对象边界框的 120%，常设为 -20% 到 120% 避免截断阴影/模糊）
• filterUnits：设为 userSpaceOnUse（按 SVG 坐标）或默认 objectBoundingBox（按元素归一化尺寸，推荐后者）
• primitiveUnits：控制滤镜原语内部单位（通常用 userSpaceOnUse 更直观）

示例（最简高斯模糊）：

svg xmlns="http://www.w3.org/2000/svg">
  
    
      
    
  
  

常用滤镜原语与效果组合

滤镜效果靠串联多个 原语实现，前一个输出可作为后一个的 in 输入（默认是 SourceGraphic）：

• 阴影（drop-shadow）：用 + +
  先偏移图形 → 模糊偏移层 → 合并到原图
• 内阴影：把 in="SourceAlpha" 作为起点，模糊后反向叠加（需 反转）
• 发光（glow）：多次不同强度的 叠加，再用 合并
• 颜色调整：用 （如灰度：type="matrix" values="0.33 0.33 0.33 0 0 …"）或

关键技巧：避免常见坑

• 滤镜默认只对「绘制内容」生效，不作用于 stroke 或 fill 的渐变色本身——要让描边也模糊，需把描边转为路径（stroke-to-path）或用 复制后单独滤镜
• stdDeviation 为 0 时部分浏览器可能失效，最小建议设为 0.1
• 性能敏感场景慎用大值 stdDeviation 或多层模糊；可用 引入预渲染位图降负载
• 想让滤镜响应鼠标事件（如 hover），确保目标元素没有 pointer-events: none，且滤镜区域未意外裁剪交互热区

进阶：动态控制与复用

filter 可配合 CSS 自定义属性或 JS 动态改写 stdDeviation 等属性值：

  

也可将 filter 定义在外部 .svg 文件中，用 filter="url(./filters.svg#blur)" 引用，利于复用和缓存。

基本上就这些。SVG filter 不复杂但容易忽略坐标系和输入链，动手试几个原语连起来，比看十篇教程都管用。