通过css改变svg img的颜色

oogh 发布于2019-04-23 11:55 / 3946人阅读

摘要：需求如下图，的时候改变图标颜色，图标为引入的一般的解决办法有字体图标改变的属性在事件中切换图片老一点的方案是切换背景但是为了更小的开销，一般为更好的解决方案，的颜色是在标签内通过属性写死的，所以用到了使用了滤镜中的。

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

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

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

代码如下：

              
                {styles.image}>
                  
                
                {item.line1}
                {item.line2}

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; } } }


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

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

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

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

GPU云服务器云服务器 js 修改svg颜色改变背景颜色 html改变表格颜色改变html页面颜色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1356.html

利用CSS改变图片颜色的100种方法！

摘要：前言说到对图片进行处理，我们经常会想到这类的图像处理工具。或者是的时候，对图片的对比度，阴影进行处理。过滤器通常被用于调整图片，背景和边界的渲染。最后，安利我们的公众号前端指南。前言说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影...

Keven 2019-08-02 16:06 评论0 收藏0
利用CSS改变图片颜色的100种方法！

摘要：前言说到对图片进行处理，我们经常会想到这类的图像处理工具。或者是的时候，对图片的对比度，阴影进行处理。过滤器通常被用于调整图片，背景和边界的渲染。最后，安利我们的公众号前端指南。前言说到对图片进行处理，我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图标显示不同的颜色。或者是hover的时候，对图片的对比度，阴影...

pinecone 2019-08-30 15:54 评论0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出图层里的图标右键选中这个图层右击这个图层把这个图层放到新文件点击图片的按钮自动切图到最小再调整一下画布大小将图片设置为长宽一样导出即可在页面里图片会默认保持比例所以只要设置宽高的其中一种就可以了抠图的前端现在基本没有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出图层里的图标右键选中这个图层showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 评论0 收藏0
你知道SVG Sprites是什么吗，还在用css sprite就太low了

摘要：它是基于，由联盟进行开发的。是一种采用来描述二维图形的语言这个大家都知道，那么元素是什么呢单纯翻译的话，是符号的意思，然我的理解是元素用来定义一个图形模板对象，它可以用一个元素实例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，...

fevin 2019-08-30 15:54 评论0 收藏0
用css绘制各种形状

摘要：同样的方法可以实现下面这种布局具体代码如下通过把改成或，就可以立即得到左侧倾斜或右侧倾斜的标签页。简单的饼图的绘制思路是把圆形的左右两部分指定为上述两种颜色，然后用伪元素覆盖上去，通过旋转来决定露出多大的扇区。自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不...

Lionad-Morotar 2019-08-29 12:30 评论0 收藏0