如何在悬停状态下巧妙地更改多个svg颜色

Question

我多次使用一张带有<use>标签的svg图片。

我想巧妙地改变悬停的颜色。(全部使用相同的颜色)

​

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指定正确的viewbox，并隐藏主要的viewbox，然后可以依靠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>

​

或者依赖于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>

​