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

发布时间 2023-08-03 16:30:04作者: 等风来灬

原因: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图标上传到阿里矢量图标库重新编辑下默认颜色配置,重新下载就可以