svg : feComposite 滤镜

马黑黑 · 发表于 2023-10-19 20:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-10-20 07:38 编辑

feComposite 滤镜执行两个输入源的智能像素组合，在图像空间中使用 Porter-Duff（波特-达夫）合成操作，例如 over、in、atop、xor 等中的任意一个，另外，还有一个智能组件 arithmetic 操作可供选用。

feComposite 语法：

<feComposite in="源1" in2="源2" operator="合成方式"><feComposite>
<!-- 若启用智能组件 arithmetic ，还需加上 k1、k2、k3、k4 属性，k1 控制重叠的图像亮度，k2 控制输入源 in 亮度，k3 控制输入源 in2 的输入亮度，k4 亮度偏移量 -->

下面给出一个演示实例。例中，创建一个 f1 滤镜，内含两个 image 滤镜作为输入源，各带一张图片、各有自己的起始位置和宽高尺寸；feComposite 滤镜对两个输入源通过 in 和 in2 属性指定快照进行合成，默认以 over 方式合成，不同的 opertator 属性值（即波特-达夫合成方式）会产生不同的效果。然后，让 f1 滤镜应用到一个 div 标签中，该标签除了宽高尺寸和滤镜绑定属性，没有其他设置。基础代码如下：

<svg style="position: absolute; width: 0; height: 0;">
	<!-- 滤镜 -->
	<filter id="f1">
		<feImage x="10" y="10" width="100" height="100" href="https://638183.freep.cn/638183/t23/btn/hshx.png" result="honghua" />
		<feImage x="0" y="0" width="474" height="266" href="https://638183.freep.cn/638183/t23/3/lake1.jpg" result="hupo" />
		<feComposite in="honghua" in2="hupo" operator="over" />
		<!-- operator="arithmetic" 时，feComposite 标签要加入 k1="1" k2="0.1" k3="0.1" k4="0.2" -->
	</filter>
</svg>
<!-- div标签绑定 f1 滤镜 -->
<div style="width: 474px; height: 266px; filter: url(#f1);"></div>

feComposite 滤镜

选择 operator >>

基于 feComposite 滤镜，operator 属性值的含义如下：

over: in 属性中定义的源图形放置在 in2 属性中定义的目标图形上方
in: in 属性中定义的源图形的部分替换了 in2 属性中定义的目标图形
out: 他先是了在 in 属性中定义的源图形的各个部分
atop: 它显示源图形中与目标图形重叠的部分替换了目标图形
xor: 它显示了 in 属性中定义的源图形的非重叠区域与 in2 属性中定义的目标图形组合在一起
lighter: 它显示了分别显示在 in 和 in2 属性中定义的源图形和目标图形的总和
arithmatic: 它显示使用以下公式分别组合了in和in2属性中定义的源图形和目标图形：结果= k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4

feComposite 滤镜可能相对抽象，同时，以上的演示，在不同浏览器下效果可能也不尽相同，不过，该滤镜更多地是与光滤镜合作，将来我们会有机会进一步熟悉它。