论坛 › 马黑黑教程专版 › svg : feComposite 滤镜

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

svg : feComposite 滤镜

本帖最后由 马黑黑 于 2023-10-20 07:38 编辑 <br /><br /><style>
.ma p { margin: 8px 0; }
.rred { color: red; }
.ggreen { color: green; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.mypic { filter: url(#f1); }
</style>

<div class="ma">

<p>feComposite 滤镜执行两个输入源的智能像素组合，在图像空间中使用 Porter-Duff（波特-达夫） 合成操作，例如 over、in、atop、xor 等中的任意一个，另外，还有一个智能组件 arithmetic 操作可供选用。</p>
<p>feComposite 语法：</p>
<pre>&lt;feComposite in="<span class="rred">源1</span>" in2="<span class="rred">源2</span>" operator="<span class="rred">合成方式</span>"&gt;&lt;feComposite&gt;
<span class="ggreen">&lt;!-- 若启用智能组件 arithmetic ，还需加上 k1、k2、k3、k4 属性，k1 控制重叠的图像亮度，k2 控制输入源 in 亮度，k3 控制输入源 in2 的输入亮度，k4 亮度偏移量 --&gt;</span></pre>
<p>下面给出一个演示实例。例中，创建一个 f1 滤镜，内含两个 image 滤镜作为输入源，各带一张图片、各有自己的起始位置和宽高尺寸；feComposite 滤镜对两个输入源通过 in 和 in2 属性指定快照进行合成，默认以 over 方式合成，不同的 opertator 属性值（即波特-达夫合成方式）会产生不同的效果。然后，让 f1 滤镜应用到一个 div 标签中，该标签除了宽高尺寸和滤镜绑定属性，没有其他设置。基础代码如下：</p>
<pre>
&lt;svg style="position: absolute; width: 0; height: 0;"&gt;
        <span class="ggreen">&lt;!-- 滤镜 --&gt;</span>
        &lt;filter id="f1"&gt;
                &lt;feImage x="10" y="10" width="100" height="100" href="https://638183.freep.cn/638183/t23/btn/hshx.png" result="honghua" /&gt;
                &lt;feImage x="0" y="0" width="474" height="266" href="https://638183.freep.cn/638183/t23/3/lake1.jpg" result="hupo" /&gt;
                &lt;feComposite in="honghua" in2="hupo" operator="<span class="rred">over</span>" /&gt;
                <span class="ggreen">&lt;!-- operator="arithmetic" 时，feComposite 标签要加入 k1="1" k2="0.1" k3="0.1" k4="0.2" --&gt;</span>
        &lt;/filter&gt;
&lt;/svg&gt;
<span class="ggreen">&lt;!-- div标签绑定 f1 滤镜 --&gt;</span>
&lt;div style="width: 474px; height: 266px; <span class="rred">filter: url(#f1)</span>;"&gt;&lt;/div&gt;
</pre>
<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" k1="1" k2="0.1" k3="0.1" k4="0.2" id="fec"/>
        </filter>
</svg>

<div style="width: 474px; height: 266px; filter: url(#f1);"><p>feComposite 滤镜</p></div>

<p id="btn">
        <span>选择 operator &gt;&gt; </span>
        <input type="button" value="over" disabled />
        <input type="button" value="in" />
        <input type="button" value="out" />
        <input type="button" value="lighter" />
        <input type="button" value="atop" />
        <input type="button" value="xor" />
        <input type="button" value="arithmetic" />
</p>
<p>基于 feComposite 滤镜，operator 属性值的含义如下：</p>
<pre>
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
</pre>
<p>feComposite 滤镜可能相对抽象，同时，以上的演示，在不同浏览器下效果可能也不尽相同，不过，该滤镜更多地是与光滤镜合作，将来我们会有机会进一步熟悉它。</p>
</div>

<script>
let btns = document.querySelectorAll('#btn input');
let lastBtn = 0;
btns.forEach((item,key) => {
        item.onclick = () => {
                fec.setAttribute('operator',item.value);
                btns.disabled = false;
                item.disabled = true;
                lastBtn = key;
        };
});
</script>

红影 发表于 2023-10-19 21:48

k1-k4这个看得有点晕{:4_173:}

红影 发表于 2023-10-19 21:49

“feComposite 滤镜可能相对抽象”应该说是十分抽象{:4_173:}

马黑黑 发表于 2023-10-20 07:36

红影 发表于 2023-10-19 21:48
k1-k4这个看得有点晕

这个有计算公式，今后有余力再去研究

马黑黑 发表于 2023-10-20 07:37

红影 发表于 2023-10-19 21:49
“feComposite 滤镜可能相对抽象”应该说是十分抽象

光滤镜都会用到它，所以这个要懂

红影 发表于 2023-10-20 14:22

马黑黑 发表于 2023-10-20 07:36
这个有计算公式，今后有余力再去研究

哦，这个原来还有公式的啊，还以为只是设置个数值呢{:4_173:}

红影 发表于 2023-10-20 14:25

马黑黑 发表于 2023-10-20 07:37
光滤镜都会用到它，所以这个要懂

嗯，今天看到光滤镜了，合成方式用到的还正好是智能组件 arithmetic
光滤镜真好看，很有立体感。对这个feComposite 计算不懂也要记下来{:4_187:}

马黑黑 发表于 2023-10-20 19:36

红影 发表于 2023-10-20 14:22
哦，这个原来还有公式的啊，还以为只是设置个数值呢

它有一整套规范的

马黑黑 发表于 2023-10-20 19:37

红影 发表于 2023-10-20 14:25
嗯，今天看到光滤镜了，合成方式用到的还正好是智能组件 arithmetic
光滤镜真好看，很有立体感。对这个 ...

太抽象，慢慢领会吧

红影 发表于 2023-10-20 20:10

马黑黑 发表于 2023-10-20 19:36
它有一整套规范的

等以后再深入了解吧，现在先学习各种滤镜{:4_173:}

红影 发表于 2023-10-20 20:11

马黑黑 发表于 2023-10-20 19:37
太抽象，慢慢领会吧

都还没接触到它的那套规范呢，现在只是知道有这么个东东{:4_173:}

马黑黑 发表于 2023-10-20 23:33

红影 发表于 2023-10-20 20:11
都还没接触到它的那套规范呢，现在只是知道有这么个东东

这就差不多了

马黑黑 发表于 2023-10-20 23:34

红影 发表于 2023-10-20 20:10
等以后再深入了解吧，现在先学习各种滤镜

根据需要，慢慢扩展

红影 发表于 2023-10-21 10:55

马黑黑 发表于 2023-10-20 23:33
这就差不多了

那我就放心了{:4_173:}

红影 发表于 2023-10-21 10:56

马黑黑 发表于 2023-10-20 23:34
根据需要，慢慢扩展

好的，先把你教的这些先学会了再说，扩展是以后的事。

马黑黑 发表于 2023-10-21 10:58

红影 发表于 2023-10-21 10:56
好的，先把你教的这些先学会了再说，扩展是以后的事。

不能说“教”这个字。最近，家长在加给孩纸不可，都是违法的。

马黑黑 发表于 2023-10-21 10:58

红影 发表于 2023-10-21 10:55
那我就放心了

放一百个心

红影 发表于 2023-10-21 13:30

马黑黑 发表于 2023-10-21 10:58
不能说“教”这个字。最近，家长在加给孩纸不可，都是违法的。

好吧，不提这个字。“学”这个字可以用吧{:4_173:}

红影 发表于 2023-10-21 13:31

马黑黑 发表于 2023-10-21 10:58
放一百个心

还放一千个心呢，哪来的那么多心啊{:4_196:}

马黑黑 发表于 2023-10-21 19:13

红影 发表于 2023-10-21 13:31
还放一千个心呢，哪来的那么多心啊

那好，有一个放一个，有一百个放一百个，一个都不留

查看完整版本: svg : feComposite 滤镜