首页 > 其他分享 >svg图标不变色的原因和解决方法

svg图标不变色的原因和解决方法

时间:2023-08-03 16:34:10浏览次数:45  
标签:图标 svg 标签 变色 属性 方法 fill

原因:svg图标上有一个 fill 属性影响

解决方法:

方法1:

1. svg 标签上修改fill 属性为 fill="currentColor"

2. path 标签清空fill 属性

1 <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2 <path d="M11.8567 2C12.2621 2.00008 12.6592 2.11519 13.0019 2.33194C13.3445 2.5487 13.6186 2.85821 13.7924 3.22454C13.9661 3.59086 14.0324 3.99896 13.9835 4.40144C13.9345 4.80392 13.7724 5.18426 13.516 5.49829C13.2595 5.81231 12.9192 6.04714 12.5346 6.1755C12.1501 6.30385 11.737 6.32047 11.3433 6.22341C10.9496 6.12635 10.5916 5.91961 10.3108 5.62719C10.0299 5.33477 9.83779 4.96868 9.7567 4.57143H6.48242C6.0954 4.5716 5.72343 4.72135 5.44426 4.98938C5.16508 5.25741 5.0003 5.62297 4.98437 6.00966C4.96843 6.39634 5.10257 6.77423 5.35874 7.06432C5.61492 7.35441 5.9733 7.53426 6.35899 7.56628L6.48242 7.57143H9.51413C10.1271 7.57115 10.716 7.80964 11.1561 8.23632C11.5961 8.663 11.8526 9.24431 11.8713 9.85696C11.8899 10.4696 11.6691 11.0654 11.2558 11.5181C10.8425 11.9707 10.2691 12.2445 9.65727 12.2814L9.51413 12.2857H6.24242C6.13621 12.806 5.8406 13.2683 5.41288 13.5831C4.98517 13.8978 4.45582 14.0425 3.92748 13.9891C3.39914 13.9358 2.90943 13.6881 2.5533 13.2942C2.19718 12.9003 2 12.3882 2 11.8571C2 11.3261 2.19718 10.814 2.5533 10.4201C2.90943 10.0262 3.39914 9.77851 3.92748 9.72513C4.45582 9.67176 4.98517 9.81647 5.41288 10.1312C5.8406 10.4459 6.13621 10.9083 6.24242 11.4286H9.51413C9.90107 11.4282 10.2729 11.2783 10.5519 11.0102C10.8309 10.7421 10.9955 10.3765 11.0114 9.98991C11.0272 9.60329 10.893 9.22552 10.6368 8.93551C10.3806 8.64551 10.0223 8.46572 9.6367 8.43371L9.51413 8.42857H6.48242C5.8694 8.42907 5.28031 8.19074 4.84009 7.76413C4.39987 7.33752 4.14317 6.75619 4.12444 6.14346C4.10571 5.53073 4.32642 4.93481 4.73975 4.4821C5.15308 4.02939 5.72652 3.75552 6.33842 3.71857L6.48242 3.71429H9.7567C9.8555 3.23027 10.1185 2.79526 10.5012 2.48287C10.8839 2.17048 11.3627 1.9999 11.8567 2ZM4.14242 10.5714C3.89689 10.5715 3.6565 10.6418 3.44968 10.7741C3.24285 10.9064 3.07824 11.0952 2.9753 11.3181C2.87236 11.541 2.8354 11.7887 2.86879 12.032C2.90218 12.2752 3.00452 12.5038 3.16371 12.6908C3.32291 12.8777 3.5323 13.0151 3.76713 13.0868C4.00196 13.1585 4.25241 13.1615 4.48886 13.0953C4.72532 13.0292 4.93789 12.8967 5.10145 12.7136C5.26502 12.5305 5.37273 12.3044 5.41185 12.062V11.6523C5.36317 11.3507 5.20868 11.0763 4.97607 10.8782C4.74346 10.6801 4.44793 10.5714 4.14242 10.5714ZM11.8567 2.85714C11.6879 2.85714 11.5207 2.8904 11.3647 2.95501C11.2087 3.01962 11.067 3.11433 10.9476 3.23372C10.8282 3.35311 10.7335 3.49484 10.6689 3.65083C10.6042 3.80682 10.571 3.97401 10.571 4.14286C10.571 4.3117 10.6042 4.47889 10.6689 4.63488C10.7335 4.79087 10.8282 4.9326 10.9476 5.05199C11.067 5.17138 11.2087 5.26609 11.3647 5.3307C11.5207 5.39531 11.6879 5.42857 11.8567 5.42857C12.1977 5.42857 12.5247 5.29311 12.7658 5.05199C13.007 4.81088 13.1424 4.48385 13.1424 4.14286C13.1424 3.80186 13.007 3.47484 12.7658 3.23372C12.5247 2.9926 12.1977 2.85714 11.8567 2.85714Z"/>
3 </svg>

 方法2:

1. 把svg图标上传到阿里矢量图标库重新编辑下默认颜色配置,重新下载就可以

 

标签:图标,svg,标签,变色,属性,方法,fill
From: https://www.cnblogs.com/PengZhao-Mr/p/17603671.html

相关文章

  • linux centos ubuntu 网络图标消失的解决办法
     在使用linux的过程中,有时会出现网络图标消失的问题,这时系统会没有网络。有些linux的网络连接由NetworkManager管理,问题应由它解决。先执行一下systemctlrestartNetworkManager看有没有效果。原因一:NetworkManager未接管网络解决办法:nmclinetworkingon原因:在终......
  • vue2项目中引入svg图标
    vue版本  vue:"^2.6.11"1.下载对应的svg依赖npminstallsvg-sprite-loader--save-dev2.创建svgIcon文件夹文件夹下对应3个文件svg文件夹:存放svg文件index.js文件:vue挂载svgindex.vue文件:封装的svg文件 3.index.js文件全局挂载到vue上1importVue......
  • PHPGD库如何使用SVG格式进行图像处理
    使用PHPGD库进行图像处理是PHP编程开发中常用的技术,而将其与SVG格式结合使用可以使图像处理更加灵活、高效和美观。本篇文章将围绕PHPGD库如何使用SVG格式进行图像处理展开探讨。一、什么是SVG格式?PHPGD库如何使用SVG格式进行图像处理SVG是可缩放矢量图形(ScalableVectorGra......
  • 不忘初心 Windows11 Insider Preview 25915.1000 Canary预览版 无更新 纯净精简 2023.
    此版不能更新补丁,并开启按流量计费,此版保留Hyper和linux,让人期待的任务栏图标从不合并功能此版已经回归,母版来自UUPWindows11InsiderPreview25915.1000Canary频道预览版,本版本自动跳过硬件检测,优化后台进程和服务,精简一些日常不常用的组件,速度和性能比原版更胜一筹,为了保证稳......
  • 分享一组矢量图标–UX图标字体库
    科技日新月异的今天,市面上各种分辨率、各种显示精度的显示设备层出不穷,在不同精度不同分辨率的显示设备下图标的应用展现出现了不同要求;如设计师为iphone3gs设计的图标在iphone4下的展现就显得很糟糕了。我们为pc端产品设计的图标到平板电脑上显示(newipad)上展现就不尽人意了......
  • 界面控件DevExpress BI Dashboard v23.1——支持全新的图标趋势指标
    DevExpress BIDashboardv23.1支持在Dashboard图表项中使用趋势指标,趋势指标有助于传达一段时间内的数据趋势——允许用户发现模式并更有效地分析复杂的数据集。使用DevExpressAnalyticsDashboard,再选择合适的UI元素(图表、数据透视表、数据卡、计量器、地图和网格),删除相应参......
  • 小米/红米关闭VoLTE图标(信号旁的HD),以K50为例
    原文:https://zhuanlan.zhihu.com/p/508684071  小米/红米关闭VoLTE图标(信号旁的HD),以K50为例行也思君夜深知雪重,时闻折竹声 45人赞同了该文章新版小米系统中应运营商要求已经隐藏了VoLTE功能的开关,如果使用卡2做为上网卡,HD图标会出现在......
  • Qt将程序打包成.exe文件,并添加图标
    1、在工程中添加一个QtResourceFile,文件名任意2、将.ico后缀的图片放到跟工程文件(.pro)文件同目录下,并在QtResourceFile文件中添加该.ico文件3、添加相关代码,设置窗口图标4、双击打开.pro文件,并在文件末添加上添加完成后ctrl+s保存,此时可以尝试run一下看看窗口图标有没有修......
  • electron的electron-packager打包运行和electron-builder生产安装包过程,学透 Electron
    electron的electron-packager打包运行和electron-builder生产安装包过程开发electron客户端程序,打包是绕不开的问题。macOS应用构建,看似近在咫尺,实则坑坑致命。场景:mac笔记本打包,以及生产出可交付的软件安装包,如何避坑,如何理解app的产生过程!!!!可以按照我测试的路程来配置环境。包......
  • Qt 生成应用程序(二)软件多图标与文件操作
    目录关联某种文件的默认打开方式assocftype解决方案设置文件默认图标应用软件添加多个图标综合方法嘿,各位Qt桌面应用开发的同学们(应该Qt大部分应用场景就是这个吧......