【前端SVG】阴影效果,模糊效果,滤镜(filter)
前言
在某些情况下,一些基本的 SVG
图形并不能提供某种想要达到的效果。比如常见的阴影效果,模糊效果等,滤镜(filter
)就是SVG
中用于解决创建复杂效果的难题的。
filter
SVG
过滤器在应用过滤效果的时候需要一个输入源。这个输入源可以是一个图形,或图形的alpha
通道,或另一个过滤器的输出值。
SVG
过滤器可以从输入源中产生一个输出图像。一个过滤器的输出可以是另一个过滤器的输入,这样,过滤器可以被链接起来使用。
下面是一张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 | 指定滤镜的输入源 |
最后
本篇文章简单的讲述了在SVG
中滤镜的一些常用的效果实现,感谢你的阅读!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekka
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01