位置: IT常识 - 正文
【css】svg修改图标颜色(svg怎么改大小)
发布时间：2024-01-04【css】svg修改图标颜色 
本文链接地址:https://www.jiuchutong.com/zhishi/285111.html
转载请保留说明！
推荐整理分享【css】svg修改图标颜色(svg怎么改大小)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:修改svg图片大小,svg图片修改,svg图片设置背景图,css如何调整svg图标大小,svg格式的图片可以随意更改颜色吗,css改变svg图片颜色,修改svg图片大小,svg图片修改,内容如对您有帮助，希望把文章链接给更多的朋友！
项目中使用了大量的svg图标，一开始只是导入直接使用，直到产品提出要根据条件修改图标的颜色
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>上一篇：橡皮树怎么养(橡皮树怎么养护)
下一篇：布拉索夫中央广场的圣诞市集，罗马尼亚 (© Alpineguide/Alamy)(布拉索夫地图)
