0
点赞
收藏
分享

微信扫一扫

借助svg滤镜实现效果

逸省 2022-06-20 阅读 35

借助SVG滤镜实现CSS无法实现的阴影和模糊效果

虽然CSS中有box-shadow实现盒阴影,drop-shadow()函数可以实现投影效果,filter滤镜或者backdrop-filter背景滤镜实现高斯模糊效果,但是依然存在某些场景,CSS是无能为力的。


此时,可能需要借助SVG滤镜“曲线救国”。


本文就通过几个案例,介绍下SVG滤镜实现CSS无法实现的阴影和模糊效果。

我们可以使用filter滤镜中的drop-shadow()函数轻松实现投影效果,例如:


< img src="fish.png" class="shadow">

.shadow {

    filter: drop-shadow(2px 2px 6px #000a);

}

因为drop-shadow()函数并没有内投影的语法,要想实现上图所示的效果,唯有让图像镂空进行模拟,但是这样的处理成本比较高,因为需要对素材进行处理。


此时,可以试试使用SVG滤镜实现PNG图像的内投影效果。


SVG代码如下(复制到页面的任意问题):


<svg width="300" height="300" viewBox="0 0 20 20" style="position:absolute;left:-999px;">

  <filter id="inset-shadow">

    <!-- 投影偏移 -->

    <feOffset dx="0" dy="0"/>

    <!-- 投影模糊 -->

    <feGaussianBlur stdDeviation="6" result="offset-blur"/>

    <!-- 反转投影使其变成内投影 -->

    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>

    <!-- 内投影附加黑色 -->

    <feFlood flood-color="black" flood-opacity=".95" result="color"/>

    <feComposite operator="in" in="color" in2="inverse" result="shadow"/>

    <!-- 把内投影显示在图像上 -->

    <feComposite operator="over" in="shadow" in2="SourceGraphic"/> 

  </filter>

</svg>

此时,只需要下面一行CSS就可以实现PNG图像的内投影效果了。


img {

    filter: url(#inset-shadow);

}

举报

相关推荐

0 条评论