I encountered a problem with svg pictures a few days ago. The cause was the project I took over. The svg pictures inside used the svg code format, and the colors were directly limited by fill in the code. The current demand is that Add a hover effect to its parent element. Here is one solution I summarized:
This is an SVG image in code format. Generally, there is no way to change its color through CSS, because its color is determined by fill,
<svg t="1696835837991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id=" 4154" width="200" height="200"> <path d = " 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423 .836543 480.882282l0- 0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438 L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c 0 24.14798-19.654642 43.705408-43.88551 43.705408L208. 445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717 195 .111746c-0.215918- 42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.30 4747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.47271 7 80.08906 67.472717l191.70823 0 0- 0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592 L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.6 78656 429.282067c-23.658839 0-42.834574- 19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.6 60886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.6261 97c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 3 9.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67. 079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491 2 3.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-4 2.690288-19.031449-42.690288 -42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19 .056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l 0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.1 20616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.21 4746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849- 25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.6 88849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701 .735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 5 98.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.7 01358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055 -26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.71 2385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z" fill="#5D5D5D" p-id="4155"></path> </svg>
If you want to change its color through css, just follow the steps below.
First, change all fill in the code to fill-rule=”evenodd”
<svg t="1696835837991" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id=" 4154" width="200" height="200"> <path d = " 0 207.579709c0 2.468215 0.500397 4.782933 1.239224 7.000438 6.678096 39.245839 40.831964 69.164243 82.140789 69.164243L423 .836543 480.882282l0- 0.237407c38.877449-2.432399 70.477144-31.363312 76.798107-68.926836 0.763386-2.217505 1.289366-4.532223 1.289366-7.000438 L501.924016 197.137893l-0.025583 0C501.683539 153.253406 467.244168 117.538997 423.836543 114.819049zM458.038506 393.46021c 0 24.14798-19.654642 43.705408-43.88551 43.705408L208. 445938 437.165618c-24.230867 0-43.858904-19.557428-43.858904-43.705408L164.587034 201.980177c0-24.149003 19.628036-43.717 195 .111746c-0.215918- 42.799782-33.818223-77.644381-76.153424-80.304977l0-0.261966L634.384863 114.544803c-44.790112 0-81.040734 36.037774-81.30 4747 80.56592l-0.023536 0 0 202.511273c0 2.407839 0.476861 4.673439 1.240247 6.831592 6.487761 38.292118 39.830147 67.47271 7 80.08906 67.472717l191.70823 0 0- 0.226151c37.921681-2.385327 68.734454-30.613228 74.961272-67.246567 0.738827-2.158153 1.216711-4.423753 1.216711-6.831592 L902.2721 195.111746 902.246517 195.111746zM859.461061 386.638851c0 23.551392-19.152199 42.643216-42.813085 42.643216L638.6 78656 429.282067c-23.658839 0-42.834574- 19.091824-42.834574-42.643216L595.844082 199.832258c0-23.552415 19.175735-42.643216 42.834574-42.643216l177.969321 0c23.6 60886 0 42.813085 19.091824 42.813085 42.643216L859.461061 386.638851zM415.680792 539.887141l0-0.260943L201.839473 539.6261 97c-44.670385 0-80.874959 35.94363-81.114412 80.375585l-0.023536 0 0 201.974038c0 2.420119 0.477884 4.687766 1.215688 6.821359 6.464225 38.181601 3 9.73498 67.316152 79.922261 67.316152L415.680792 896.113331l0-0.236384c37.824467-2.350534 68.567655-30.529317 74.744331-67. 079768 0.762363-2.133593 1.24127-4.40124 1.24127-6.821359L491 2 3.493064-19.127639 42.524512-42.691311 42.524512L212.953601 853.565283c0 0-0.022513 0-0.047072 0l-6.822382 0c-23.563672 0-4 2.690288-19.031449-42.690288 -42.524512L163.393859 624.687502c0-23.469528 19.126616-42.525536 42.690288-42.525536l200.200648 0c23.563672 0 42.691311 19 .056008 42.691311 42.525536L448.976106 811.04077zM721.154066 753.120616c-14.741749 0-26.66736 11.508102-26.66736 25.699312l 0 51.395554c0 14.228049 11.924587 25.721825 26.66736 25.721825 14.736633 0 26.663266-11.492752 26.663266-25.721825l0-51.395554C747.817332 764.628718 735.891721 753.1 20616 721.154066 753.120616zM834.775846 727.398792c-14.739702 0-26.665313 11.494799-26.665313 25.697265l0 77.118402c0 14.21 4746 11.924587 25.701358 26.665313 25.701358 14.763239 0 26.688849-11.487635 26.688849- 25.701358l0-77.118402C861.464695 738.894613 849.538061 727.398792 834.775846 727.398792zM834.775846 573.172221c-14.739702 0-26.665313 11.506055-26.665313 25.722848l0 51.395554c0 14.189164 11.924587 25.697265 26.665313 25.697265 14.763239 0 26.6 88849-11.508102 26.688849-25.697265l0-51.395554C861.464695 584.679299 849.538061 573.172221 834.775846 573.172221zM721.154066 573.195757c-14.741749 0-26.66736 11.507078-26.66736 25.709545L694.486706 701 .735295c0 14.192234 11.924587 25.686009 26.66736 25.686009 14.736633 0 26.663266-11.492752 26.663266-25.686009L747.817332 5 98.905302C747.817332 584.702835 735.891721 573.195757 721.154066 573.195757zM606.050538 701.735295c-14.68956 0-26.640754 11.435447-26.640754 25.663496l0 102.81669c0 14.214746 11.951193 25.701358 26.640754 25.7 01358 14.787798 0 26.712385-11.487635 26.712385-25.701358L632.762923 727.398792C632.763946 713.170742 620.838336 701.735295 606.050538 701.735295zM606.050538 573.172221c-14.68956 0-26.640754 11.506055 -26.640754 25.722848l0 25.709545c0 14.201443 11.951193 25.686009 26.640754 25.686009 14.787798 0 26.712385-11.484565 26.71 2385-25.686009l0-25.709545C632.763946 584.679299 620.838336 573.172221 606.050538 573.172221z" fill-rule="evenodd" p-id="4155"></path > </svg>
Then set a default fill initial color in css
Just set the outer element directly, or add a class name to svg and set fill
The third step is to set the hover effect
.swiperBox .leftTips li:hover{
fill: #fff;
color: #fff;
}
Note: If you want to change the color of svg, you only need to set fill
In this way, you can dynamically change the color of svg pictures! !