SVG feMerge 标签

简介

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

实例

第一个矩形展示三个滤镜通过 <feMergeNode> 叠加在一起,最先显示的一层排在最后;
第二个矩形展示没有使用 feMerge 时候只使用最接近的 <feGaussianBlur> 滤镜;
第三个矩形展示 没有 <feMergeNode> 节点的时候图形完全不显示,可以理解为没有任何图层;
第四个矩形展示 第一个 <feMergeNode> 节点没有设置任何属性,默认输入是最接近的 <feOffset> 滤镜图层;
第五个矩形展示 重复多个没有设置任何属性 <feMergeNode> 节点,则输入是多个最接近的 <feOffset> 滤镜图层;

<svg version="1.1" height="200" width="620" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="mergeNode1">
            <feOffset in="SourceGraphic" dx="60" dy="60"  result="offset"  />
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"  />
            <feMerge>
                <feMergeNode in="offset" />
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
        <filter id="mergeNode2">
            <feOffset in="SourceGraphic" dx="60" dy="60" />
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
        <filter id="mergeNode3">
            <feOffset in="SourceGraphic" dx="60" dy="60" />
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            <feMerge>
            </feMerge>
        </filter>
        <filter id="mergeNode4">
            <feOffset in="SourceGraphic" dx="60" dy="60" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
        <filter id="mergeNode5">
            <feOffset in="SourceGraphic" dx="60" dy="60"  result="offset"/>
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
            <feMerge>
                <feMergeNode />
                <feMergeNode />
                <feMergeNode />
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
    <rect x="10" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#mergeNode1)"/>
    <rect x="140" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#mergeNode2)"/>
    <rect x="240" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#mergeNode3)"/>
    <rect x="340" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#mergeNode4)"/>
    <rect x="490" y="10"  width="100" height="100" fill="green" stroke="blue" stroke-width="2" filter="url(#mergeNode5)"/>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注