如何在悬停时单独更改多个 svg 颜色

Question

I used one svg image multiple time with used of <use> tag.

I want to change hover color saperately. (Using same color for all)

 svg:hover path, svg:hover use { fill:red; }

 <svg xmlns="http://www.w3.org/2000/svg" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <path id="Path_2" data-name="Path 2" d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1" transform="translate(-37.999 -2)" fill="#25a1f2" fill-rule="evenodd"/> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-1" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-2" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink"> <use class="ic-3" xlink:href="#Path_2" /> </svg>

Answer 1

Start by specifing the correct viewbox for each SVG and hide the main one then you can rely on CSS variables to adjust the colors

 path { fill:var(--c,#25a1f2); } svg:hover use { --c:red; }

 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" > <path id="Path_2" data-name="Path 2" d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1" transform="translate(-37.999 -2)" fill-rule="evenodd"/> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-1" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-2" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-3" xlink:href="#Path_2" /> </svg>

Or rely on currectColor:

 svg { color:#25a1f2; } svg:hover use { color:red; }

 <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" > <path id="Path_2" data-name="Path 2" d="M50.981,35.251c15.487,0,23.913-12.754,23.913-23.913V10.2a18.512,18.512,0,0,0,4.1-4.327,18.905,18.905,0,0,1-4.783,1.366,8.861,8.861,0,0,0,3.644-4.555,20.889,20.889,0,0,1-5.238,2.05A8.133,8.133,0,0,0,66.468,2a8.557,8.557,0,0,0-8.427,8.427,4.44,4.44,0,0,0,.228,1.822A23.546,23.546,0,0,1,40.961,3.366a8.722,8.722,0,0,0-1.139,4.327,9.049,9.049,0,0,0,3.644,7.06,7.678,7.678,0,0,1-3.872-1.139h0a8.323,8.323,0,0,0,6.832,8.2,7.021,7.021,0,0,1-2.277.228,3.876,3.876,0,0,1-1.594-.228,8.628,8.628,0,0,0,7.971,5.921A17.2,17.2,0,0,1,40.05,31.379,6.305,6.305,0,0,1,38,31.151a21.5,21.5,0,0,0,12.981,4.1" transform="translate(-37.999 -2)" fill="currentColor" fill-rule="evenodd"/> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-1" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-2" xlink:href="#Path_2" /> </svg> <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="40.994" height="33.25" viewBox="0 0 40.994 33.25"> <use class="ic-3" xlink:href="#Path_2" /> </svg>