svg : feBlend 滤镜

马黑黑

feBlend 滤镜是一个融合滤镜，它通过 in 和 in2 属性指定融合对象，并将融合结果输出。融合模式通过 mode 属性指定，可用的融合方式仅五种：normal、multiply、darken、lighten 和 screen，比我们之前介绍的 CSS 融合技术的可用融合方式少很多。feBlend 语法：

<feBlend in="融合对象1" in2="融合对象2" mode="融合方式" />

以下示例展示两张图片的融合效果：左边是融合后的结果，其后分别是两张原图的原始样貌。可以单击示例提供的按钮选择不同的融合模式：

请选择融合模式 :

svg核心代码：

<svg width="570" height="200">
	<filter id="blend">
		<feImage x="10" y="10" width="180" height="180" href="https://638183.freep.cn/638183/t23/btn/pgyk.jpg" result="bg1" />
		<feImage x="10" y="10" width="180" height="180" href="https://638183.freep.cn/638183/t23/btn/hshx.jpg" result="bg2" />
		<feBlend in="bg1" in2="bg2" mode="lighten" id="fBlend" />
	</filter>
	<rect x="10" y="10" width="180" height="180" style="filter: url(#blend);" />
	<image x="220" y="10" href="https://638183.freep.cn/638183/t23/btn/hshx.jpg" />
	<image x="380" y="10" href="https://638183.freep.cn/638183/t23/btn/pgyk.jpg" />
</svg>

代码解析：

创建一个 id="blend" 的滤镜组，该滤镜组分别用上两个 feImage 滤镜和一个 feBlend 滤镜，两个 feImage 滤镜位置、尺寸一致，各自从外部引用不同的图片，拥有自己的快照（result）。feBlend 滤镜通过 in 和 in2 属性值取前面两个 feImage 滤镜的快照标识指定两个融合源，并设定融合方式。

然后，rect 矩形标签通过CSS内联样式使用 filter 属性绑定滤镜。这样，rect 标签展现出来的样子就是滤镜的效果（我们知道，rect 标签并没有上图片的属性，只有填充 fill 和 描边 stroke，但通过滤镜绑定它也可以上图）。

红影

这个好，正好通过这些可选的混合模式的结果，进一步感受一下各种混合模式带来的效果

红影

<feBlend in="bg1" in2="bg2" mode="lighten" id="fBlend" />

这里的id="fBlend"没被使用到啊，这个id名称可以任意设么还是必须是这个？

红影

这个混合和之前的合并比较容易混淆，赶紧跑前面又复习了一下合并内容。
两者的区别是合并没有模式可选，原样子并上去。不知道理解得对不对

马黑黑

红影 发表于 2023-10-14 09:49
这个混合和之前的合并比较容易混淆，赶紧跑前面又复习了一下合并内容。
两者的区别是合并没有模式可选，原 ...

多个滤镜，多数情况下都要通过 feMerge 进行合并，但这里，feBlend 并不是合并滤镜，而是将两种效果（可能是两个滤镜，也可以是滤镜和源）叠加在一起。

feMerge 滤镜只干一件事：合并各种效果；feBlend 也只干一件事：以叠加方式融合两种效果。

红影

马黑黑 发表于 2023-10-14 12:16
多个滤镜，多数情况下都要通过 feMerge 进行合并，但这里，feBlend 并不是合并滤镜，而是将两种效果（可 ...

嗯，一种是合并，一种是叠加，这样理解更容易。

马黑黑

红影 发表于 2023-10-14 17:03
嗯，一种是合并，一种是叠加，这样理解更容易。

feBlend是独立滤镜，和 feMerge 不同

红影

马黑黑 发表于 2023-10-14 22:15
feBlend是独立滤镜，和 feMerge 不同

这里面的这些分别很麻烦，都得记得。

马黑黑

红影 发表于 2023-10-14 23:36
这里面的这些分别很麻烦，都得记得。

每一样工具，都有自己的用途、特性

红影

马黑黑 发表于 2023-10-15 07:33
每一样工具，都有自己的用途、特性

是的，有需求的时候，这些都很有用。

马黑黑

红影 发表于 2023-10-15 11:24
是的，有需求的时候，这些都很有用。

工具一般来说是协同工作，这是当代科学的理念。

红影

马黑黑 发表于 2023-10-15 22:01
工具一般来说是协同工作，这是当代科学的理念。

那也需要了解每个工具的作用，才能让它们协同作业。现在还不了解

马黑黑

红影 发表于 2023-10-15 22:31
那也需要了解每个工具的作用，才能让它们协同作业。现在还不了解

有些人弄了好几年，还是弄不好

红影

马黑黑 发表于 2023-10-16 17:36
有些人弄了好几年，还是弄不好

可见这东西挺难

马黑黑

红影 发表于 2023-10-16 23:06
可见这东西挺难

要有耐心

红影

马黑黑 发表于 2023-10-17 00:00
要有耐心

是的，要边学习边琢磨

马黑黑

红影 发表于 2023-10-17 20:16
是的，要边学习边琢磨

真正用到它来实现自己的目的了，就是掌握了

红影

马黑黑 发表于 2023-10-21 11:45
真正用到它来实现自己的目的了，就是掌握了

那是肯定，虽然现在还做不到。

马黑黑

红影 发表于 2023-10-21 13:49
那是肯定，虽然现在还做不到。

不过多数非前端专业的人士，他们不愿意去记太多的东西，做的时候查文档就好

红影

马黑黑 发表于 2023-10-21 19:27
不过多数非前端专业的人士，他们不愿意去记太多的东西，做的时候查文档就好

这也是个办法。而且更省力