通过css改变svg img的颜色

2019-01-10 07:49:24来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 需求如下图,hover的时候改变图标颜色,图标为引入的svg img

一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?

但是为了更小的开销,一般css为更好的解决方案,svg的颜色是在标签内通过fill属性写死的,所以用到了使用了CSS3滤镜filter中的drop-shadow。

代码如下:

              <section>
                <div className={styles.image}>
                  <img src={item.icon} alt="Advantage" />
                </div>
                <p>{item.line1}</p>
                <p>{item.line2}</p>
              </section>

 

section{
      .image{
        display: inline-block;
        overflow: hidden;
      }
      img{
        position: relative;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);
      }
      &:hover{
        background-color: gray;
        img{
          left: -80px;
        }
      } 
}

drop-shadow(h-shadow v-shadow blur spread color):给图像设置一个阴影效果。其中<offset-x> <offset-y>分别设置阴影的偏移量,且必填。具体可以查看w3c的标准

 主要的实现原理就是设置需要的阴影效果,并隐藏,hover时切换显示就好,简单,但是之前没怎么了解到

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:meta标签的http-equiv与content解析

下一篇:不可思议的纯 CSS 滚动进度条效果