Как сменить несколько цветов svg при наведении - PullRequest
Новая
       0

Как сменить несколько цветов svg при наведении

0 голосов
/ 07 марта 2020

Я использовал одно изображение SVG несколько раз с тегом <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>

1 Ответ

1 голос
/ 07 марта 2020

Начните с указания правильного окна просмотра для каждого 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>

Или положитесь на 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...