马黑黑 发表于 2023-10-14 08:21

svg : feBlend 滤镜

本帖最后由 马黑黑 于 2023-10-14 08:23 编辑 <br /><br /><style>
.ma p { margin: 8px 0; }
.rred { color: red; }
.ma > pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
.ma > svg { border: 1px solid gray; }
</style>

<div class="ma">
        <p>feBlend 滤镜是一个融合滤镜，它通过 in 和 in2 属性指定融合对象，并将融合结果输出。融合模式通过 mode 属性指定，可用的融合方式仅五种：normal、multiply、darken、lighten 和 screen，比我们之前介绍的 CSS 融合技术的可用融合方式少很多。feBlend 语法：</p>
        <pre>&lt;feBlend in="融合对象1" in2="融合对象2" mode="融合方式" /&gt;</pre>
        <p>以下示例展示两张图片的融合效果：左边是融合后的结果，其后分别是两张原图的原始样貌。可以单击示例提供的按钮选择不同的融合模式：</p>
        <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>
        <p>
                <span class="rred">请选择融合模式 : </span>
                <input type="button" value="normal" class="btns" />
                <input type="button" value="multiply" class="btns" />
                <input type="button" value="darken" class="btns" />
                <input type="button" value="lighten" disabled class="btns" />
                <input type="button" value="screen" class="btns" />
        </p>
        <p>svg核心代码：</p>
        <pre>&lt;svg width="570" height="200"&gt;
        &lt;filter id="blend"&gt;
                &lt;feImage x="10" y="10" width="180" height="180" href="https://638183.freep.cn/638183/t23/btn/pgyk.jpg" result="bg1" /&gt;
                &lt;feImage x="10" y="10" width="180" height="180" href="https://638183.freep.cn/638183/t23/btn/hshx.jpg" result="bg2" /&gt;
                &lt;feBlend in="bg1" in2="bg2" mode="lighten" id="fBlend" /&gt;
        &lt;/filter&gt;
        &lt;rect x="10" y="10" width="180" height="180" style="filter: url(#blend);" /&gt;
        &lt;image x="220" y="10" href="https://638183.freep.cn/638183/t23/btn/hshx.jpg" /&gt;
        &lt;image x="380" y="10" href="https://638183.freep.cn/638183/t23/btn/pgyk.jpg" /&gt;
&lt;/svg&gt;</pre>
        <p>代码解析：</p>
        <p>创建一个 id="blend" 的滤镜组，该滤镜组分别用上两个 feImage 滤镜和一个 feBlend 滤镜，两个 feImage 滤镜位置、尺寸一致，各自从外部引用不同的图片，拥有自己的快照（result）。feBlend 滤镜通过 in 和 in2 属性值取前面两个 feImage 滤镜的快照标识指定两个融合源，并设定融合方式。</p>
        <p>然后，rect 矩形标签通过CSS内联样式使用 filter 属性绑定滤镜。这样，rect 标签展现出来的样子就是滤镜的效果（我们知道，rect 标签并没有上图片的属性，只有填充 fill 和 描边 stroke，但通过滤镜绑定它也可以上图）。</p>
</div>

<script>

let lastBtn = 3;
let btns = document.querySelectorAll('.btns');

btns.forEach((item,key) => {
        item.onclick = () => {
                fBlend.setAttribute('mode',item.value);
                item.disabled = true;
                btns.disabled = false;
                lastBtn = key;
        };
});

</script>

红影 发表于 2023-10-14 09:45

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

红影 发表于 2023-10-14 09:46

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

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

红影 发表于 2023-10-14 09:49

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

马黑黑 发表于 2023-10-14 12:16

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

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

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

红影 发表于 2023-10-14 17:03

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

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

马黑黑 发表于 2023-10-14 22:15

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

feBlend是独立滤镜，和 feMerge 不同

红影 发表于 2023-10-14 23:36

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

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

马黑黑 发表于 2023-10-15 07:33

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

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

红影 发表于 2023-10-15 11:24

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

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

马黑黑 发表于 2023-10-15 22:01

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

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

红影 发表于 2023-10-15 22:31

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

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

马黑黑 发表于 2023-10-16 17:36

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

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

红影 发表于 2023-10-16 23:06

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

可见这东西挺难{:4_173:}

马黑黑 发表于 2023-10-17 00:00

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

要有耐心

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

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

是的，要边学习边琢磨{:4_187:}

马黑黑 发表于 2023-10-21 11:45

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

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

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

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

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

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

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

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

红影 发表于 2023-10-21 23:34

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

这也是个办法。而且更省力{:4_173:}
页: [1] 2 3 4 5 6 7
查看完整版本: svg : feBlend 滤镜