svg滤镜组合的核心逻辑是按序执行的图像处理流水线，每个fe原语以前一个的输出为输入，通过result/in属性链式传递；常用模式如投影（fegaussianblur+feoffset+femerge）、外发光（模糊+调色+合并）、浮雕（光照+混合）等均依赖严格顺序。
滤镜组合的核心逻辑
SVG滤镜不是简单叠加，而是按顺序执行的图像处理流水线。每个fe原语接收上一个步骤的输出作为输入，通过result属性命名中间结果，再用in属性引用。比如先模糊、再偏移、最后合并，三步必须串行定义，不能颠倒顺序。
常用组合模式与写法
多数实用效果都来自几个固定搭配：
- 投影效果：用feGaussianBlur处理SourceAlpha（只取透明度通道），再用feOffset位移，最后feMerge把阴影和原图叠在一起
- 外发光：高斯模糊原始图形，用feColorMatrix调亮并提纯颜色（例如只保留红色通道），再与原图feMerge
- 浮雕感：用feDiffuseLighting生成明暗贴图，再与原图feComposite以“multiply”或“screen”模式混合
预设库的组织建议
把滤镜封装成可复用的模块，便于项目间共享：
- 每个filter定义放在
里，id命名带语义，如id="glow-blue-strong"或id="shadow-slight" - 参数尽量用合理默认值，比如stdDeviation="2"适合轻量模糊，dx="2" dy="2"适合微妙投影
- 配合CSS类名使用，例如.btn-glow { filter: url(#glow-blue-strong); }，避免在HTML中硬编码url()
调试与性能注意点
组合越多，渲染开销越大，尤其在移动端：
- 用x和y属性限制滤镜作用区域，默认是-10%到+110%，可缩为x="-5" y="-5" width="110%" height="110%"减少计算量
- 避免对大面积元素（如全屏背景）应用多重滤镜；优先考虑用CSS filter做基础效果，SVG滤镜专注复杂定制
- Chrome开发者工具的“Rendering”面板可开启“Paint flashing”，直观查看滤镜是否引发频繁重绘
