第三节 SVG 滤镜feblend

in

• SourceGraphic
  这个值代表使用当前的图形元素作为操作的输入

mode

• normal
  正常模式。这个比较简单也比较好理解。最终的颜色会忽略下面被覆盖的颜色，直接显示为上面的颜色。

<svg width="400" height="160">
    <defs>
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feBlend mode="normal" />
        </filter>

        <filter id="blend2" >
            <feImage xlink:href="./09E.png" result="f1" width="100" height="100" ></feImage>
            <feImage xlink:href="./2324.jpg" result="f2" x="175" y="25" width="100" height="100"></feImage>
            <feBlend mode="normal" in="f1" in2="f2"/>
        </filter>

        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#f00" x="0" y="0" ></rect>
            <rect width="5" height="50" fill="#0f0" x="5" y="0"></rect>
        </pattern>

        <pattern id="p2" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#0ff" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#00f" x="5" y="0"></rect>
        </pattern>
    </defs>

    <g filter="url(#blend1)">
        <rect width="100" height="100" x="0" y="0" stroke="#000" stroke-width="1" fill="url(#p1)" />
        <rect width="100" height="100" x="25" y="25" stroke="#000" stroke-width="1" fill="url(#p2)" />
    </g>

    <rect x="150" y="0" width="200" height="200"  fill="none" filter="url(#blend2)"></rect>

</svg>

image.png

• multiply
  正片叠底模式。最终的颜色是顶色和底色相乘。黑色叠加后结果会变成黑色，白色叠加时不变
  假设底色的a（0<= a<= 1）混合色是b（0<= b<= 1）,结果色是c
  算法结构：c = ab
  算法来源
  由于a和b都是小于等于1的，相乘的结果都是小于等于a和b最小的

<svg width="400" height="160">
    <defs>
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feBlend mode="multiply" />
        </filter>

        <filter id="blend2" >
            <feImage xlink:href="./09E.png" result="f1" width="100" height="100" ></feImage>
            <feImage xlink:href="./2324.jpg" result="f2" x="175" y="25" width="100" height="100"></feImage>
            <feBlend mode="multiply" in="f1" in2="f2"/>
        </filter>

        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#f00" x="0" y="0" ></rect>
            <rect width="5" height="50" fill="#0f0" x="5" y="0"></rect>
        </pattern>

        <pattern id="p2" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#0ff" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#00f" x="5" y="0"></rect>
        </pattern>
    </defs>

    <g filter="url(#blend1)">
        <rect width="100" height="100" x="0" y="0" stroke="#000" stroke-width="1" fill="url(#p1)" />
        <rect width="100" height="100" x="25" y="25" stroke="#000" stroke-width="1" fill="url(#p2)" />
    </g>
 <rect x="150" y="0" width="200" height="200"  fill="none" filter="url(#blend2)"></rect>
</svg>

image.png

• screen
  与正片叠底模式相反，合成图层的效果是显现两图层中较高的灰阶，而较低的灰阶则不显现（即浅色出现，深色不出现），产生一幅更加明亮的图像。黑色叠加后颜色不变，白色叠加结果为白色
  算法结构：c = 1-(1-a)(1-b)

<svg width="400" height="160">
    <defs>
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feBlend mode="screen" />
        </filter>

        <filter id="blend2" >
            <feImage xlink:href="./09E.png" result="f1" width="100" height="100" ></feImage>
            <feImage xlink:href="./2324.jpg" result="f2" x="175" y="25" width="100" height="100"></feImage>
            <feBlend mode="screen" in="f1" in2="f2"/>
        </filter>

        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#f00" x="0" y="0" ></rect>
            <rect width="5" height="50" fill="#0f0" x="5" y="0"></rect>
        </pattern>

        <pattern id="p2" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#0ff" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#00f" x="5" y="0"></rect>
        </pattern>
    </defs>
    <g filter="url(#blend1)">
        <rect width="100" height="100" x="0" y="0" stroke="#000" stroke-width="1" fill="url(#p1)" />
        <rect width="100" height="100" x="25" y="25" stroke="#000" stroke-width="1" fill="url(#p2)" />
    </g>
    <rect x="150" y="0" width="200" height="200"  fill="none" filter="url(#blend2)"></rect>
</svg>

image.png

• darken
  变暗模式。此关键字会对前后景颜色值的RGB值（即RGB通道中的颜色亮度值）分别进行比较，取二者中低的值再组合成为混合后的颜色
  算法结构：c=min(a,b)

<svg width="400" height="160">
    <defs>
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feBlend mode="darken" />
        </filter>

        <filter id="blend2" >
            <feImage xlink:href="./09E.png" result="f1" width="100" height="100" ></feImage>
            <feImage xlink:href="./2324.jpg" result="f2" x="175" y="25" width="100" height="100"></feImage>
            <feBlend mode="darken" in="f1" in2="f2"/>
        </filter>

        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#f00" x="0" y="0" ></rect>
            <rect width="5" height="50" fill="#0f0" x="5" y="0"></rect>
        </pattern>

        <pattern id="p2" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#0ff" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#00f" x="5" y="0"></rect>
        </pattern>
    </defs>
    <g filter="url(#blend1)">
        <rect width="100" height="100" x="0" y="0" stroke="#000" stroke-width="1" fill="url(#p1)" />
        <rect width="100" height="100" x="25" y="25" stroke="#000" stroke-width="1" fill="url(#p2)" />
    </g>
    <rect x="150" y="0" width="200" height="200"  fill="none" filter="url(#blend2)"></rect>
</svg>

image.png

• lighten
  变亮模式。该模式与变暗模式相反，会对前后景色的RGB值进行比较，取高值合成为混合后的颜色，从而达到变亮的效果
  算法结构：c=max(a,b)

<svg width="400" height="160">
    <defs>
        <filter id="blend1" x="0" y="0" width="100%" height="100%">
            <feBlend mode="lighten" />
        </filter>

        <filter id="blend2" >
            <feImage xlink:href="./09E.png" result="f1" width="100" height="100" ></feImage>
            <feImage xlink:href="./2324.jpg" result="f2" x="175" y="25" width="100" height="100"></feImage>
            <feBlend mode="lighten" in="f1" in2="f2"/>
        </filter>

        <pattern id="p1" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#f00" x="0" y="0" ></rect>
            <rect width="5" height="50" fill="#0f0" x="5" y="0"></rect>
        </pattern>

        <pattern id="p2" patternUnits="objectBoundingBox" width=".1" height=".4"
                 patternTransform="rotate(45)" fill-opacity="0.9">
            <rect width="5" height="50" fill="#0ff" x="0" y="0"></rect>
            <rect width="5" height="50" fill="#00f" x="5" y="0"></rect>
        </pattern>
    </defs>
    <g filter="url(#blend1)">
        <rect width="100" height="100" x="0" y="0" stroke="#000" stroke-width="1" fill="url(#p1)" />
        <rect width="100" height="100" x="25" y="25" stroke="#000" stroke-width="1" fill="url(#p2)" />
    </g>
    <rect x="150" y="0" width="200" height="200"  fill="none" filter="url(#blend2)"></rect>
</svg>

image.png

参考
https://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute
https://en.wikipedia.org/wiki/Blend_modes#Darken_Only