svg修改图标颜色

水深无声 2024-03-17 17:38 115阅读 0赞

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法：

1. 修改[svg图片][svg]源

最开始的svg图标：

![2275efcd3b3e48dbb2f47af6b74712f5.png][]

修改这个fill="currentColor"

![806023635dbd407aa80e2c7bc5a71e74.png][]

要是要修改线条颜色就修改stroke属性：

![65b1122c49e241f2b92715fd7454501b.png][]

![28d578a322e14a7eb804f32577c001cd.png][]

**fill属性设置对象内部的颜色，stroke属性设置绘制对象的线条的颜色。**

fill: 填充色

stroke：边框，即线条，设置其颜色

[svg]: https://so.csdn.net/so/search?q=svg%E5%9B%BE%E7%89%87&spm=1001.2101.3001.7020
[2275efcd3b3e48dbb2f47af6b74712f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/abb5b39984b8453a9b11bbfaf5240a33.png
[806023635dbd407aa80e2c7bc5a71e74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/64b900876b7e4d218aea56d32f18b1f9.png
[65b1122c49e241f2b92715fd7454501b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/455253d653584bba9c1abbf5d6d2346d.png
[28d578a322e14a7eb804f32577c001cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/3c33082d69514a14b43f03681b5c886a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 anychart更改图标颜色

"data": \[ \{"x": "Apples", "value": "128.14", fill: "green"\}, \{"x"...

傷城~/ 2024年04月19日 08:47/ 0 赞/ 77 阅读

相关 svg修改图标颜色

对于svg图标，想通过hover或者active 添加颜色，没有办法修改，解决办法： 1. 修改[svg图片][svg]源最开始的svg图标： ![2275efcd3b

水深无声/ 2024年03月17日 17:38/ 0 赞/ 116 阅读

相关 svg-icon图片修改颜色的三种方法

1. 直接修改svg文件中fill属性 2.直接添加css <[svg-icon][] … style=“fill:currentColor; color:gray

深碍√TFBOYSˉ_/ 2023年10月13日 23:31/ 0 赞/ 169 阅读

相关 VUE之使用svg图标

目录一安装依赖二：配置webpack 2.1 首先创建一个svg文件用来保存图标 2.2 配置build文件夹中的webpac

今天药忘吃喽~/ 2023年07月20日 13:49/ 0 赞/ 31 阅读

相关 svg矢量图标

一、介绍：是使用 XML来描述二维图形和绘图程序的语言，可缩放矢量图形。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE

待我称王封你为后i/ 2022年10月29日 01:43/ 0 赞/ 303 阅读

相关 WordPress社交网络菜单图标更改——SVG图标

前言我使用的主题为TwnetySeventeen，在编辑页面底部社交网络菜单时发现只有一些国外网站才会显示图标，例如Facebook等，国内微博等网站无法显示logo。

向右看齐/ 2022年06月09日 01:43/ 0 赞/ 465 阅读

相关把 svg 图标转成字体图标调用

1、打开 http://www.iconfont.cn 网站，登录账号 2、点击上传图标，上传完去到我的图标就可以查看到刚上传的图标了 ![2018031118162176

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 11:25/ 0 赞/ 256 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 261 阅读

相关 mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色

微信小程序，mpvue中使用svg图标，并通过代码改变图标颜色本文主要是mpvue开发小程序的代码，不过微信小程序原生开发应该也是一样的，思路都是通用的，按照这个

偏执的太偏执、/ 2021年12月14日 09:07/ 0 赞/ 648 阅读

相关 vue $confirm 自定义图标及修改图标颜色

一、先直接上解决方案，再讲解源码。 this.$confirm('', { title:"提示", message:"确认删除？",

小咪咪/ 2021年11月26日 08:01/ 0 赞/ 3198 阅读