您现在的位置是:首页 > Javascript
当前栏目
【css】svg修改图标颜色
2023-03-31 10:41:40 时间
项目中使用了大量的svg图标,一开始只是导入直接使用,直到产品提出要根据条件修改图标的颜色
可以简单看下教程了解下svg
SVG 意为可缩放矢量图形,SVG 使用 XML 格式定义图像。
导入项目的svg图标大概是这样
有个path路径,并且有类名
在style中有个fill对应的颜色就是svg的图标颜色
关于这个fill属性,大概的解释是fill 属性设置形状内的颜色
需要改颜色的话,要在svg图标的内部,把这个类名改成这样
.st0{fill:currentColor;}
然后再加一个svg类名,path上的类名不用动
.svg{
fill:currentColor;
color:#1890FF;//这里是默认颜色
}
在页面上通过v-if控制
<svg-icon class-name="xxx" icon-class="xxx" v-if="scope.row.deptCode == '1'" style="fill: currentColor; color: c0c4cc"></svg-icon>
<svg-icon class-name="xxx" icon-class="xxx" v-else style="fill: currentColor; color: #1890ff"></svg-icon>
新增下级
</el-button>
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件