SVG滤镜系列之搞懂<feBlend>元素

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11158 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

SVG滤镜元素我之前有深入介绍过两个，一个是feTurbulence滤镜，另外一个是 feDisplacementMap滤镜，前者可以用来模拟自然效果，后者可以实现元素形变，都是SVG滤镜比较高级的应用。

最近，正好无所事事，就决定查漏补缺，把SVG滤镜元素整个都过一遍，系统了解下，让对这一块的了解更加扎实，说不定以后就用到，提前做技术储备。

先从比较简单的<feBlend>元素开始。

二、feBlend元素的作用和语法

feBlend元素是SVG中用来实现混合模式的元素。

在CSS中，混合模式使用mix-blend-mode和background-blend-mode属性实现，在Canvas中使用globalCompositeOperation语法实现。

在SVG中就是<feBlend>元素。

支持的属性

<feBlend>元素支持三个属性，分别是：

in 输入元素1，混合模式的底层图形或元素。 in2 输入元素2，混合模式的上层图形元素。 mode 混合模式的类型。其支持的值和CSS混合模式的值是一样的。包括：

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

三、使用案例示意

一例胜前言，假设我们有下面这张底图，美丽的森林和安静的小鹿：

然后还有一张下雪的前景特效图：

则下面的SVG代码（两种写法均）可以实现两张图片的滤色screen混合效果：

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="snowEffect">
      <feImage 
        href="snow.jpg" 
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="snowSource"
      />
      <feImage
        href="landscape.jpg"
        x="0%" y="0%"
        width="100%"
        height="100%"
        result="landscape"
      />
      <feBlend in="landscape" in2="snowSource" mode="screen" />
    </filter>
  </defs>

  <rect 
    x="0%" y="0%" width="100%" height="100%" 
    style="filter:url(#snowEffect);"
  ></rect>
</svg>

其他写法：

<svg
  width="150"
  height="200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="snowEffect2">
      <feImage 
        href="https://image.zhangxinxu.com/image/blog/201905/snow.jpg" 
        width="100%"
        height="100%"
        result="snowSource2"
      />
      
      <feBlend in="SourceGraphic" in2="snowSource2" mode="screen" />
    </filter>
  </defs>

  <image
    href="https://image.zhangxinxu.com/image/blog/201905/landscape-s.jpg"
    width="100%"
    height="100%"
    style="filter: url(#snowEffect2);"
  />
</svg>

均可以实现如下图所示的雪中森林小鹿的效果：

眼见为实，您可以狠狠地点击这里：feblend两个图像混合模式效果demo

一些说明

SourceGraphic是SVG滤镜中in和in2属性内置的关键字，表示应用滤镜的原始图像内容，完整支持的属性值包括：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint，这些以后有机会展开介绍。

四、结语说明

想起一个词语，林深见鹿，哈哈哈，比较符合上面的示意图，找了个美图。

好无聊哦。

唉……最近给自己放假，每天回来大部分时间都是刷沙雕视频，周末钓鱼也是钓两天，着实没劲，其满足感不如创造东西来得持久。

所以呢，决定了，动笔开始写写小说，然后开始录制CSS世界三部曲精讲视频。

最晚五一节之后就开始，人呐，还是要忙碌点才充实。

正所谓，林深才见鹿。

🦒🦒🦒🦒

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。