svg学习记录（十一）

在某些情况下，一些基本的svg图形并不能实现诸如阴影、模糊等效果。而滤镜(filter)就是用来解决创建复杂效果的难题的。

filter

SVG过滤器在应用过滤效果的时候需要一个输入源，这个输入源可以是一个图形或者一个图形的alpha通道，或另一个过滤器的输入值。

SVG过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可以是另一个过滤器的输入，这样，过滤器可以被链接起来使用。

滤镜与之前定义渐变效果类似，它需要在def标签中定义，然后再通过它的ID值引用到图形元素中。

模糊效果

我们看一个简单的例子：

<svg width="200" height="200">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
        </filter>
    </defs>
    <rect filter="url(#blurFilter)" x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>

上面例子中，我们使用了feGaussianBlur 滤镜，也就是模糊滤镜。在该滤镜中我们给定了两个属性分别是in和stdDeviation，in属性代表给定过滤器原语的输入，stdDeviation 属性设定了模糊的程度。

多个滤镜搭配工作

SVG中的滤镜还支持多个滤镜混合使用，你可能见过一个filter标签内里有大量代码，这对新手来说可能就很懵了

接下来，我们看看一个简单的多滤镜使用的例子：

<svg width="200" height="200">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
            <feOffset in="blur" dx="10" dy="12" result="offsetBlur" />
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
    <image xlink:href="./img/1.jpg" x="10" y="0" height="50px" width="50px" filter="url(#blurFilter)"
</svg>

在这个例子中，我们使用了两种路径，分别是feGaussianBlur和feOffset，分别带有模糊和阴影效果。在feGaussianBlur多了一个result属性，这个是SVG的一个特征，不同滤镜作用的效果可以通过 result产出一个中间结果（primitives），其他滤镜可以使用in导入不同滤镜中导出的result。之后，使用feOffset滤镜用于创建阴影效果，我们使用in拿到上面result导出的内容，再做出位移操作。

feMerge滤镜登场，用于将同时应用滤镜效果（不是按顺序显示效果），它里边需要写入feMergeNode 标签，使用in属性将不同滤镜导出的效果进行输入。

关于滤镜通用属性

属性	说明
x、y	设置滤镜坐标系（默认值0）
width、height	滤镜容器大小（默认值100%）
result	导出滤镜效果，便于其他滤镜使用
in	指定滤镜的输入源