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

这篇文章发布于 2024年04月11日,星期四,22:01,归类于 SVG相关。 阅读 3972 次, 今日 118 次 2 条评论

 

封面占位图

一、前言

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

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

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

二、feBlend元素的作用和语法

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

CSS中,混合模式使用mix-blend-modebackground-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世界三部曲精讲视频。

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

正所谓,林深才见鹿。

🦒🦒🦒🦒

(本篇完)

分享到:


发表评论(目前2 条评论)

  1. DaleZ说道:

    好像 CSS 这个滤镜并不能正确调用……

  2. 代码如诗如画说道:

    保持学习的精神令人敬佩