svg基础（十）滤镜-feMerge（多滤镜叠加滤镜）

feMerge:多滤镜叠加滤镜

允许同时应用滤镜效果而不是按顺序应用滤镜效果。利用result存储别的滤镜的输出可以实现这一点，然后在一个 <feMergeNode>子元素中访问它

1 语法

<feMerge>
    <feMergeNode in=""></feMergeNode>
</feMerge>

2 feMergeNode属性

• in SourceAlpha，SourceGraphic，其他滤镜的result

SourceAlpha和SourceGraphic的区别:

SourceGraphic的颜色是全彩

SourceAlpha是一个与图像具有相同尺寸的提取了其中的黑色部分可以使用它来创建更好的阴影

3 示例

 <svg>
        <defs>
            <filter id="gaussian" x="0" y="0">
                <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
                <feOffset in="blur" dx="10" dy="10" result="offsetBlur"></feOffset>
                <feMerge>
                    <feMergeNode in="offsetBlur" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <rect x="10" y="10" width="100" height="100" fill="black" filter="url(#gaussian)"></rect>
    </svg>

• <feGaussianBlur in=“SourceAlpha” stdDeviation=“5” result=“blur” /> 会生成一个模糊效果

result=‘blur’，这个是 SVG 的一个特性，不同滤镜作用的效果可以通过 result 产出一个中间结果（也称为 primitives 图元），其他滤镜可以使用 in 属性导入不同滤镜产出的 result，继续操作。

• <feOffset> 滤镜还是很好理解的，使用 in 拿到了上一步的结果 result = ‘blur’，然后做了一个简单的位移。
• <feMergeNode in=“offsetBlur” /> 表示了上述两个滤镜的最终输出结果 offsetBlur，也就是阴影的部分
• <feMergeNode in=“SourceGraphic” /> 中的 in=“SourceGraphic” 关键词表示图形元素自身将作为 原语的原始输入

在不同滤镜中利用 result 和 in 属性，可以实现在前一个基本变换操作上建立另一个操作，比如我们的例子中就是添加模糊后又添加位移效果。