Hover не работает на незаполненных участках пути SVG

Question

У меня есть portfilio (https://portfolio.umairstem.now.sh/) домашняя страница, где есть значки svg. Когда мышь наводит курсор на значок, я хочу, чтобы она стала светло-голубой. Проблема заключается в том, что, когда мышь пересекает пробелы в SVG, эффект не возникает. Изображение ниже показывает, что я имею в виду, если мне неясно. Я пытался добавить background или padding, но это смещает элементы на странице.

Мой CSS ниже:

svg {
    display: inline-block;
    width: auto;
    height: 5vw;
    min-height: 2rem;
    max-height: 4rem;
    scale: 0.5;
}

.Fill-1:hover{//Fill-1 is the SVG class name
   fill: #1793D1;
}

Answer 1

Вы можете изменить fill пути при наведении курсора на содержащий элемент, который в этом случае может быть <svg/>:

svg:hover path {
  fill: blue
}

Вот скрипка

Answer 2

Вам необходимо удалить class="Fill-1" с пути. Затем вы применяете стили - как все уже упоминали - к элементу svg.

body{background:black;}
svg{fill:white;}
svg:hover{fill:skyBlue;}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"><path d="M135 2552c-40-14-81-45-105-80l-25-36 0-1156 0-1156 24-35c13-19 40-46 60-60l36-24 1155 0 1155 0 36 24c20 14 47 41 60 60l24 35 0 1156 0 1156-24 35c-13 19-40 46-60 60l-36 24-1140 2c-627 0-1149-2-1160-5zm550-446c58-27 78-47 100-99 53-128-35-261-182-274-94-9-175 33-214 109-24 46-25 128-2 175 47 99 187 141 298 89zm1148-521c128-27 217-95 276-214 52-103 61-188 61-592l0-359-195 0-194 0-3 368-3 367-25 44c-45 80-113 109-206 90-60-12-112-53-143-114-20-38-21-56-21-397l0-358-195 0-195 0 0 575 0 575 195 0 195 0 0-76 0-76 51 57c101 110 233 146 402 110zm-1053-590l0-575-195 0-195 0 0 575 0 575 195 0 195 0 0-575z"></path></g></svg>

Answer 3

Вместо использования псевдоселектора hover в элементе SVG используйте его вместо содержащего элемента. Например:

a:hover svg {
  fill: #1793d1;
}

Примечание: вам нужно будет удалить другие селекторы и стили, чтобы это работало, как показано; если вы действительно хотите быть слишком конкретным в отношении селектора, вы можете это сделать, но я не рекомендую этого делать. a:hover .Fill-1 чрезмерно.