@kaidos

Как поменять цвет иконки SVG при наведении?

Код иконки:
<svg width="39" height="34" viewBox="0 0 39 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3029 22.2175L14.6578 31.2472C15.5808 31.2472 15.9805 30.8527 16.4599 30.3789L20.7873 26.2634L29.754 32.798C31.3985 33.71 32.5572 33.2297 33.0008 31.2925L38.8865 3.84768L38.8882 3.84606C39.4098 1.42693 38.009 0.480945 36.4068 1.07441L1.81054 14.2551C-0.550586 15.1671 -0.514836 16.477 1.40916 17.0704L10.254 19.8081L30.7989 7.01551C31.7658 6.37838 32.6449 6.7309 31.9218 7.36803L15.3029 22.2175Z" fill="url(#paint0_linear_2_7282)"/>
<defs>
<linearGradient id="paint0_linear_2_7282" x1="19.4995" y1="0.902344" x2="19.4995" y2="33.2438" gradientUnits="userSpaceOnUse">
<stop stop-color="#AFFDFF" stop-opacity="0.38"/>
<stop offset="1" stop-color="#AFFDFF" stop-opacity="0.08"/>
</linearGradient>
</defs>
</svg>


Пробовал использовать такой скрипт:

$('img.img-svg').each(function(){
    var $img = $(this);
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');
    $.get(imgURL, function(data) {
      var $svg = $(data).find('svg');
      if(typeof imgClass !== 'undefined') {
        $svg = $svg.attr('class', imgClass+' replaced-svg');
      }
      $svg = $svg.removeAttr('xmlns:a');
      if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
        $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
      }
      $img.replaceWith($svg);
    }, 'xml');
});


Но цвет всё равно не меняется через CSS
.blockname img.img-svg path{
    fill: green;
}
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
Ugolnikovvv
@Ugolnikovvv
Junior Frontend-разработчик
Чтобы цвет менять в CSS, нужно убрать все атрибуты fill в path

<svg width="39" height="34" viewBox="0 0 39 34" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M15.3029 22.2175L14.6578 31.2472C15.5808 31.2472 15.9805 30.8527 16.4599 30.3789L20.7873 26.2634L29.754 32.798C31.3985 33.71 32.5572 33.2297 33.0008 31.2925L38.8865 3.84768L38.8882 3.84606C39.4098 1.42693 38.009 0.480945 36.4068 1.07441L1.81054 14.2551C-0.550586 15.1671 -0.514836 16.477 1.40916 17.0704L10.254 19.8081L30.7989 7.01551C31.7658 6.37838 32.6449 6.7309 31.9218 7.36803L15.3029 22.2175Z" />
</svg>

svg {
  fill: blue
}

svg:hover {
  fill: green;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы