你一个前端,svg图片改色都不会?都给我卷起来 | 您所在的位置:网站首页 › ps路径填充颜色怎么改色 › 你一个前端,svg图片改色都不会?都给我卷起来 |
周六来公司写点东西,刚好有个icon颜色不对,ui又不在公司,那么就只能自己动手丰衣足食了。 呜呜呜,好想住公司,都不用上下班了。 当ui给你了svg图片,且是单色的,又只有你用svg填充色用的fill,修改里面的颜色即可。下面是例子: 首先,ui一般会直接给你svg图片,比如这样的: 搜索关键词,找到id="icon换色层" fill="#f2b044",替换fill的值为#df2222,那么就变成红色了 看到这个,有人就要说了,还不如按方法1,改个颜色,然后复制下文件改名,粘贴,简单粗暴。 确实,可惜我们是前端,一点点优化也是优化,一点点体积也是体积(一点点味道一般,还是蜜雪冰城好喝)。css改色利用的是过滤器filter的drop-shadow属性,它的功能是可定点定位生成一个可调整模糊度以及颜色的投影,卧槽,真牛,感觉能做好多炫酷的东西,属实是彩色影分身术了。 具体代码: 效果如下: 然后我们调整下原本icon的位置,将它往左挪出去:left:-20px,代码如下: 最后我们去掉方便识别的边框,并给div加上overflow:hidden,一个简单的icon改色就完成了!!好棒!!。 filter: drop-shadow(x, y, blurry, color),第一个参数距离源x轴的像素大小,第二个参数是距离源y轴的像素大小,第三个是模糊度,第四个是投影的颜色。 这是mdn的资料,有个很好看的实现:developer.mozilla.org/zh-CN/docs/… 这个蓝色底就是drop-shadow实现的。 最后看我多重影分身之术:drop-shadow(20px 0 red) drop-shadow(20px 20px green) drop-shadow(20px 39px blue) drop-shadow(20px 0 skyblue), 原图是橙色,第一次是红色,第二次是绿色,第三次是蓝色,第四次是天蓝,每多一次drop-shadow,都会把上一次的图像复制一次,把上一次的作为原图进行投影,是裂变了没错!! 补充(2022/07/28更新)感谢掘友:hboot,朽木_Xenon 的建议,学习到了更多,现在补充上。 还是使用我们的svg,只不过我们将标签一层的fill="#f2b044"改为`fill="currentColor",: currentColor是取当前标签/或者上级标签的字体颜色的值,所以我们在svg标签或者上级标签设定color为#df2222,就能实现颜色的变化 这个有一定的前提要求,复杂图形需要每个图形分开的,比如: Img/Touziz-Default这块代表上边弯曲的梯形,我改颜色为红色: 这块代表缺了一块的圆,我改为黄色: 这块代表底部弯曲的三角,我改为蓝色: 真丑! 总的来说,改svg图片的颜色,就是找标签上一连串数字的部分,然后尝试改色。 另外如果这个svg用的勤,颜色换的多,可以考虑弄成组件,变量改动颜色。 |
CopyRight 2018-2019 实验室设备网 版权所有 |