前端必知必会 | 学SVG看这篇就够了（十一）

_island
1,467 阅读3分钟

这是SVG系列目录：

前言

在某些情况下，一些基本的 SVG 图形并不能提供某种想要达到的效果。比如常见的阴影效果，模糊效果等，滤镜（filter）就是SVG中用于解决创建复杂效果的难题的。

filter

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

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

下面是一张SVG过滤器输入和输出的说明图片：

54.png

滤镜与我们和之前定义渐变效果类似，它需要在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>

55.png

上面例子中，我们使用了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>

56.png

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

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

关于滤镜通用属性

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

最后

本篇文章简单的讲述了在SVG中滤镜的一些常用的效果实现，感谢你的阅读！

😀😀 关注我，不迷路！ 😀😀

avatar
文章
阅读
粉丝