SVG滤镜系列之搞懂元素
内容提要
本文介绍了SVG中的feBlend元素，用于实现混合模式。它支持in、in2和mode属性，可实现不同的混合效果。文章还提供了滤色混合效果的示例代码。作者表示将继续学习SVG滤镜元素，并计划录制CSS世界三部曲精讲视频。
延伸解读
feBlend 与 CSS 混合模式的对应关系
文章指出，feBlend 的 mode 属性支持与 CSS mix-blend-mode 相同的混合模式值，包括正常、正片叠底、滤色、叠加等。这意味着熟悉 CSS 混合模式的开发者可以快速迁移知识，但需注意 SVG 滤镜中的混合发生在滤镜图层面，而非直接作用于元素背景，因此实际效果可能因输入源不同而有差异。
in 与 in2 的角色区分
feBlend 通过 in 和 in2 指定两个输入源，其中 in 为底层图形，in2 为上层图形。文章示例中，将风景图作为 in，雪景图作为 in2，并设置 mode 为 screen，实现了雪中森林的效果。理解这两个属性的顺序有助于控制混合的上下层关系，避免效果颠倒。
SourceGraphic 关键字的灵活运用
文章提到 SourceGraphic 是 SVG 滤镜中 in 和 in2 的内置关键字，表示应用滤镜的原始图像内容。在第二个示例中，作者直接使用 SourceGraphic 作为 in，省去了显式引入底图的步骤。这提示开发者可以简化代码，但需注意 SourceGraphic 仅代表当前元素，若需混合其他图像仍需通过 feImage 引入。
Q&A
什么是SVG中的feBlend元素？
feBlend元素是SVG中用于实现混合模式的元素。
feBlend元素支持哪些属性？
feBlend元素支持in、in2和mode三个属性。
feBlend元素可以实现哪些混合模式？
feBlend支持多种混合模式，包括正常、正片叠底、滤色等。
如何使用feBlend元素实现滤色效果？
可以通过指定in和in2属性以及mode为screen来实现滤色效果。
feBlend元素与CSS中的混合模式有什么相似之处？
feBlend元素的混合模式与CSS中的mix-blend-mode和background-blend-mode属性相似。
作者对SVG滤镜元素的未来计划是什么？
作者计划继续学习SVG滤镜元素，并录制CSS世界三部曲精讲视频。
