• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

【前端SVG】阴影效果,模糊效果,滤镜(filter)

武飞扬头像
juejin
帮助188

前言

在某些情况下,一些基本的 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 滤镜,也就是模糊滤镜。在该滤镜中我们给定了两个属性分别是instdDeviation,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

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

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

关于滤镜通用属性

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

最后

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

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanekka
系列文章
更多 icon
同类精品
更多 icon
继续加载