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

Question

我多次使用一张 svg 图像并使用 of<use>标签。我想单独更改悬停颜色。（全部使用相同的颜色）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

首先为每个 SVG 指定正确的视图框并隐藏主视图框，然后您可以依靠 CSS 变量来调整颜色

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>

或者依赖 currentColor：

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>