并行滤镜

前端教程SVG

<feMerge> 并行滤镜允许同时应用多个滤镜效果，而不是按照顺序应用滤镜。

基本语法

<filter id="myFilter">
    <feOffset in="SourceGraphic" dx="60" dy="60" />
    <feGaussianBlur stdDeviation="5" result="blur2" />
    <feMerge>
        <feMergeNode in="blur2" />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

• <feMerge> 的子元素只能是 <feMergeNode>
• 每个 <feMergeNode> 只接受一个参数 in，即其他滤镜的结果
• 每个 <feMergeNode> 将参数 in 同时输出，而不是按顺序叠加滤镜效果

示例

下面的示例中：

• resultBlur 包含了 3 种图形：原始图形 + feOffset + feGaussianBlur
• 左边红框中，按照顺序应用效果，所以最终的结果就是 resultBlur
• 右边绿框中，feMergeNode.in="resultBlur" 输出模糊后的图形，feMergeNode.in="SourceGraphic" 输出原始图形，并且2者互不影响。

新窗口打开