0

Вопрос такой, я сделал svg иконку с изменением цвета при наведении, я решил проблему сделав копию svg и заменив в самой svg цвет на который мне нужен, то есть я добавил два одинаковых класса с разными иконками-svg. И вот сам вопрос могу ли я каким-то образом сделать это компактнее, чтобы менялась при наведении та же иконка, которую я добавил в первый раз? А не добавлять копию иконки с другим цветом...

введите сюда описание изображения

1 ответ 1

3

Самый простой способ вставить код картинки внутри HTML после чего можно будет манипулировать с помощью CSS. Например:

a svg {
  fill: green;
  width: 50px;
  height: 50px;
}
    
a svg:hover {
  fill: red;
}
<a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175">
    <path d="M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/>
  </svg>
</a>

5
  • А если сам код svg очень большой, если быть точным 145 строк, возможно ли просто подключить в html документ? как шрифт например(если такое возможно конечно). Но за способ спасибо! 23 ноя 2021 в 19:32
  • Можно но подход не назовёшь чистым (правильным). 23 ноя 2021 в 19:47
  • Например можно использовать filter вот генератор codepen.io/sosuke/pen/Pjoqqp 23 ноя 2021 в 19:48
  • То есть вы вставляете img src ну или background и потом уже hover и фильтром 23 ноя 2021 в 19:50
  • Спасибо за ответ и способ, очень вам благодарен!!! 23 ноя 2021 в 20:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.