svg 代码格式的图片,添加hover效果 |
您所在的位置:网站首页 › js修改svg颜色不生效 › svg 代码格式的图片,添加hover效果 |
前几天遇到一个 svg 图片的问题,起因是我接手的这个项目,里面的svg图片使用的svg代码格式,颜色也是直接在代码中通过 fill来限制的,现在的需求是,需要给他的父级元素添加一个hover效果。下面是我总结的一种解决方案: 这是代码格式的svg图片,一般是没办法通过css改变其颜色,因为他的颜色都是通过 fill 来确定的, 想要通过css来改变其颜色,按以下步骤来即可。 首先先将代码中的 fill全部修改成 fill-rule="evenodd" 然后再css中设置一个默认的 fill 初始颜色直接对其外层元素设置即可,或者给svg添加一个类名在设置 fill 第三步 设置hover效果 .swiperBox .leftTips li:hover{ fill: #fff; color: #fff; }注意:想要改变svg的颜色,只需要设置 fill 即可 这样就可实现动态改变 svg图片颜色的问题!! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |