混合（blend）

前端教程SVG

上节所说的滤镜，就像一条流水线，每个环节对图形进行加工，送到下个环节继续加工；而本节要学习的混合（blend），就是把2个图形或图层堆叠在一起，混合模式（blend modes）决定了这两层图形对应的像素值该如何计算。

基本语法

<filter id="myFilter">
    <feImage href="xxxx.jpg" x="0" y="0" width="60" height="90" result="someImage" />
    <feBlend in="SourceGraphic" in2="someImage" mode="normal" />
</filter>
<image href="yyyy.jpg" filter="url(#myFilter)" />

<feBlend> 元素属性解释

• in="INPUT1" 输入源图形1，如果此元素是第一个元素，则默认为 SourceGraphic，否则默认为前一个滤镜的结果
• in2="INPUT2"输入源图形2，默认值同 in
• mode="normal(默认) | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity" 混合模式

关于混合模式的详细说明，请参考：MDN - blend-mode

示例

新窗口打开

CSS混合

CSS3 通过 mix-blend-mode和 background-blend-mode支持混合，

更多请参考：MDN - mix-blend-mode 和 MDN - background-blend-mode

小结

本节我们介绍了 SVG 的混合，接下来我们学习最后一个知识点：动画！