feBlend是SVG滤镜元素，用于像素级混合两个输入图像，支持normal、multiply、screen等模式，嵌套于filter内，通过in/in2指定源，mode控制算法，兼容主流浏览器但高级模式在Safari中可能降级。
SVG的feBlend滤镜元素用于实现两个输入图像（通常为源图形和背景）之间的像素级混合，其核心是基于Photoshop中常见的混合模式（如normal、multiply、screen、overlay等），在HTML5中可直接嵌入SVG滤镜链，实现丰富的视觉合成效果。
feBlend的基本用法与关键属性
<feblend></feblend>必须嵌套在<filter></filter>内，通过in和in2指定两个输入源，mode决定混合算法。常用输入源包括：SourceGraphic（原始图形）、BackgroundImage（页面背景）、SourceAlpha（源图透明度）、或前一个滤镜的输出（如result）。
-
mode="normal"：默认覆盖，等效于无混合 -
mode="multiply"：变暗模式，适合阴影叠加或色彩压暗 -
mode="screen"：变亮模式，常用于光晕、高光增强 -
mode="overlay"：结合multiply与screen，保留高光与暗部细节，增强对比 -
mode="darken"/"lighten"：逐像素取较小/较大值，适用于蒙版合成
与CSS混合模式的区别与协同
CSS的mix-blend-mode作用于HTML元素层级，受堆叠上下文和z-index影响；而feBlend运行在SVG滤镜坐标系中，完全可控、不依赖层叠顺序，且支持更精细的中间结果复用（通过result命名）。二者可配合使用：例如先用CSS控制元素整体混合关系，再用feBlend对局部区域做二次合成（如文字描边与渐变填充的叠加）。
注意：feBlend不支持CSS自定义属性动态切换mode，需JS操作DOM或重写滤镜定义才能实时变更。
实用场景示例：非破坏性图层叠加
常见需求如为图标添加动态光影、为文字叠加纹理、或实现“玻璃拟态”（glassmorphism）中的模糊+透明+背景混合效果。例如：
- 将
<fegaussianblur></fegaussianblur>后的背景模糊图作为in2，原始图形为in，用mode="soft-light"（需浏览器支持，部分仅支持基础模式）柔化边缘 - 用
<feoffset></feoffset>生成阴影后，与原图用mode="multiply"混合，避免阴影发灰 - 结合
<fecomposite></fecomposite>提取Alpha通道，再与彩色图层feBlend，实现精准着色
兼容性与优化提醒
所有现代浏览器（Chrome 45+、Firefox 35+、Safari 9.1+、Edge 79+）均支持feBlend及主流mode值，但hard-light、color-dodge等高级模式在Safari中可能降级为normal。建议始终提供视觉回退（如备用CSS样式），并在复杂滤镜链中用result命名中间结果，提升可读性与调试效率。
性能方面，feBlend本身开销极低，但若输入源来自高分辨率BackgroundImage或多次重绘区域，应配合will-change: filter或限制滤镜作用范围（如用clipPath裁剪）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
