当前位置:首页 > 前端技术 > 通过css改变svg img的颜色

通过css改变svg img的颜色

2022年09月16日 16:03:06前端技术4

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

通过css改变svg img的颜色 _ JavaClub全栈架构师技术笔记

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

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

代码如下:

通过css改变svg img的颜色 _ JavaClub全栈架构师技术笔记
              <section>
                <div className={styles.image}>
                  <img src={item.icon} alt="Advantage" />
                </div>
                <p>{item.line1}</p>
                <p>{item.line2}</p>
              </section>
通过css改变svg img的颜色 _ JavaClub全栈架构师技术笔记

 

通过css改变svg img的颜色 _ JavaClub全栈架构师技术笔记
section{
      .image{
        display: inline-block;
        overflow: hidden;
      }
      img{
        position: relative;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);    
     border-left: 30px solid transparent;
     border-right: 30px solid transparent;
} &:hover{ background-color: gray; img{ left: -80px; } } }
通过css改变svg img的颜色 _ JavaClub全栈架构师技术笔记

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

 主要的实现原理就是设置需要的阴影效果,并隐藏,hover时切换显示就好。

但是发现,在safari浏览器中,图片主体隐藏后,阴影也消失了,查看filter的兼容发现safari其实是支持这个属性的,所以给原图片加上了透明边框

border-left: 30px solid transparent;//防止drop-shadow主体超出视线隐藏后阴影消失
border-right: 30px solid transparent;

作者:风吹麦浪打
来源链接:https://www.cnblogs.com/love314159/p/13646552.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42039.html

标签: css
分享给朋友:

“通过css改变svg img的颜色” 的相关文章

html和css的属性大全

一、HTML属性 1、字体属性(font) 1、大小 {font-size: x-large;}(特大) xx-small;(极小) 一般只要用数值就可以,单位:PX、PD 2、样式 {font-style: oblique...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

HTML中的form表单的标签、属性、属性值;  CSS以及HTML5新增属性、属性值

HTML中的form表单的标签、属性、属性值; CSS以及HTML5新增属性、属性值

form表单HTML5、CSS3标签及属性、属性值 form表单HTML标签、属性、属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) (下拉框选) (多行文本框) (1) 是...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

css文字重叠解决

css文字重叠解决

DIV+CSS布局文字较多时候重叠下一行文字内容如何解决? 出现原因是因为对li设置了css高度和宽度,当内容比较多是内容会自动换行,而又有高度,这样就造成内容溢出而与下一排内容重叠覆盖现象。 解决方法如下: 第一种,取消高度...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。