feImage

这个滤镜比较好理解就是在滤镜中增加图片，这个滤镜一般不会单独使用，而是配合其他滤镜一起使用。语法如下：

<feImage xlink:href="yourImagePath" />

有一点需要注意该滤镜不能添加width和高度属性，否则会无法显示，不知道为什么。

feFlood

通过起始点和宽度高度，制造一个颜色区域，可以控制输入的颜色值和透明度。相当于对矩形填充颜色，不过不能是渐变色，支持16进制颜色，rgb，rgba。语法如下：

  <feFlood result="floodFill" x="40" y="40" width="130" height="130"
      flood-color="rgba(12,255,12,0.5)" flood-opacity="0.5"/>

和feImage一样，这个滤镜一般不单独使用，而是和其他滤镜结合使用。

feblend

该滤镜接受两个输入源，然后通过一定方式将两个输入源叠加到一起，将结果输出，语法如下：

<feBlend in="" in2="" mode=""/>

mode有如下几个值：normal，multiply，screen，darken，lighten，

normal

就是将in的值放到in2上面形成遮盖效果。

   <svg width="100%" height="2000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs >
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feImage xlink:href="../img/fj.png" result="f1"/>
            <feFlood result="floodFill" x="0" y="0" width="230" height="150" flood-color="rgba(12,255,12)"/> 
            <feBlend in="floodFill" in2="f1" mode="normal"/>
        </filter>
    </defs>
    <rect x="150" y="0" width="500" height="300"  fill="none" filter="url(#blend1)"></rect>
</svg>

效果如下：

multiply

就是两个像素值的乘积，将像素0-255映射到0-1上，然后将两个图层的像素值相乘。效果如下：

screen

显示图像中较高的色阶，隐藏较低的色阶。

darken

黑暗模式，取像素较低值显示

lighten

靓丽模式，取像素较高值显示

该滤镜主要用于将两个图片叠加，在工作过程很少用到。即使用到也是让美工出图。

feComposite

feblend处理的主要是颜色，该滤镜主要处理的形状，确定两个输入源不同形状的输出。这个也是将两个输入源合成滤镜，需要参数 in，in2，operator，需要两个输入源，operator可以取值：over | in | out | atop | xor | lighter | arithmetic，如果值为arithmetic，则还可以输入四个参数k1，k2，k3，k4。下面这个介绍：

over

将in的输入源放到in2的上面，同时显示两个图像。

<filter id="composite1">
    <feImage xlink:href="../img/fj.png" result="f1" width="200" height="100"/>
    <feImage xlink:href="../img/olga.png" result="floodFill"/>
    <feComposite in="f1" in2="floodFill" operator="over" />
</filter>

效果如下：

in

用in2的输入源形状对in的输入源进行剪切。

<filter id="composite2">
    <feImage xlink:href="../img/fj.png" result="f1"/>
    <feComposite in="f1" in2="SourceGraphic" operator="in" />
</filter>
<circle cx="300" cy="900" r="200" stroke="black" stroke-width="2" filter="url(#composite2)"></circle>

out

用in2的输入源形状对in的输入源进行剪切。显示被剪切外的图形

不明白为什么这个圆的上面是黑色的，下面没有颜色。有知道的同学可以留言，大家共同学习。

atop

显示在in2的图像，同时将in的图像裁剪，在in2的图形中显示出来。

xor

显示被剪切外面的图像。

lighter

为了方便学习可以认为该滤镜的显示效果同feblend的lighter，不过cdn给的解释是，这两个输入源的和。这个属性有点特殊，他不做图形的裁剪。

<filter id="composite2">
    <feImage xlink:href="../img/fj.png" result="f1"/>
    <feComposite in="f1" in2="SourceGraphic" operator="lighter" />
</filter>

<linearGradient id="line_gra" x1="0%" y1="50%" x2="100%" y2="50%">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="0"></stop>
    <stop offset="100%" stop-color="#ffffff" stop-opacity="1"></stop>
</linearGradient>

<circle cx="300" cy="900" r="200" stroke="black" stroke-width="2" fill="url(#line_gra)" filter="url(#composite2)"></circle>

arithmetic

该滤镜一般和光照滤镜一起使用，咱们在科技球代码里面使用过。下面详细介绍一下。因为参数比较多，让人望而生畏，不过不用怕，说明白了就很简单。计算公式如下：k1,k2,k3,k4取值为0-1之间，i1,i2为输入源为i1，i2的像素值。result为输出结果。

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

k1控制重叠的图像是像是亮度，k2控制输入源in是否亮度，k3控制输入源in2的输入亮度，k4亮度偏移量。

<filter id="composite2">
    <feImage xlink:href="../img/fj.png" result="f1"/>
    <feComposite in="f1" in2="SourceGraphic" operator="arithmetic" k1="1" k2="0.1" k3="0.1" k4="0.2"/>
</filter>

<linearGradient id="line_gra" x1="0%" y1="50%" x2="100%" y2="50%">
    <stop offset="0%" stop-color="#ffff00" stop-opacity="0"></stop>
    <stop offset="100%" stop-color="#ffff00" stop-opacity="1"></stop>
</linearGradient>

至于圆球上面的颜色和下面的颜色为啥不一样，我也不清楚，有知道的同学可以分享一下。

总结

这一节我们可以称之为滤镜的合成，feblend是颜色合成，feComposite滤镜形状合成。feblend在开端开发的过程中，实际应用比较少，feComposite做一些svg特效处理还是比较有用的。耗费您的时间读到这里，希望对您有所帮助，有所收获。谢谢观看。

svg滤镜详解（四）