Изменить цвет значка SVG при наведении?

Question

Привет. Я пытаюсь изменить значок SVG при наведении курсора, но, похоже, он не работает. Вот html:

<icons>
    <a href="" ><svg className="facebook" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196" ><g><circle style={{fill:'#FFFFFF'}} cx="56.098" cy="56.098" r="56.098"/><path style={{fill:'#1d1d20'}} d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>         </a>         
    <a href=""><svg className="linkedin" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196"><g><circle style={{fill: '#FFFFFF'}} cx="56.098" cy="56.097" r="56.098"/><g><path style={{fill: '#1d1d20'}} d="M89.616,60.611v23.128H76.207V62.161c0-5.418-1.936-9.118-6.791-9.118c-3.705,0-5.906,2.491-6.878,4.903c-0.353,0.862-0.444,2.059-0.444,3.268v22.524H48.684c0,0,0.18-36.546,0-40.329h13.411v5.715c-0.027,0.045-0.065,0.089-0.089,0.132h0.089v-0.132c1.782-2.742,4.96-6.662,12.085-6.662C83.002,42.462,89.616,48.226,89.616,60.611L89.616,60.611z M34.656,23.969c-4.587,0-7.588,3.011-7.588,6.967c0,3.872,2.914,6.97,7.412,6.97h0.087c4.677,0,7.585-3.098,7.585-6.97C42.063,26.98,39.244,23.969,34.656,23.969L34.656,23.969zM27.865,83.739H41.27V43.409H27.865V83.739z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></a>
    <a href=""><svg className="github" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" ><path style={{fill:'#FFFFFF'}} d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368c-56.832-6.496-116.608-28.544-116.608-127.008c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68c0,0,21.504-6.912,70.4,26.336c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672c48.864-33.248,70.336-26.336,70.336-26.336c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992c0,98.72-59.84,120.448-116.864,126.816c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496c0,6.88,4.608,14.88,17.6,12.352C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></a>
</icons>

Вот мой CSS:

icons {
    display: grid;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 50px;
    grid-gap: 10px;
    grid-template-areas: 'facebook linkedin github'

}

.facebook{
    grid-area: facebook;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.linkedin{
    grid-area: linkedin;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.github{
    grid-area: github;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

Я смотрел на другие формы, в которых сказано, что используются .facebook:hover, .linkedin:hover и так далее, но это не похоже на работу. Я также пытаюсь изменить только цвет атрибута, но оставляю другие атрибуты как одни. Любые отзывы по этому вопросу будут оценены!

Answer 1

Одним из методов является обработка цветовых заливок в вашей таблице стилей вместо встроенного в изображение SVG.

Важно отметить, что использование CSS заливок переопределит что-то вроде <path fill="#123456" ... />, но не <path style="fill: #123456;" ... />. Так что в вашем случае вы должны удалить встроенные стили, которые у вас есть в различных областях (например, style={{fill:'#FFFFFF'}}, или это может работать не так, как ожидалось.

Вместо встроенных стилей добавьте классы и используйте их в качестве идентификаторов в вашем Таблица стилей для фона и цветов переднего плана. Затем просто используйте стандартные :hover методы для изменения цвета заливки.

Пример использования SVG на Facebook (без лишних символов):

icons {
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 50px;
  grid-gap: 10px;
  grid-template-areas: 'facebook linkedin github'

}

.facebook {
  grid-area: facebook;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

.fb-inner {
  fill: #fff;
}

.fb-outer {
  fill: #4267B2;
}

.facebook:hover .fb-outer {
  fill: red;
}

<a href="">
  <svg class="facebook" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196">
    <g>
      <circle class="fb-outer" cx="56.098" cy="56.098" r="56.098" />
      <path class="fb-inner" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
    </g>
  </svg>
</a>

Я взял цвет #4267B2 из правил бренда Facebook и использую обобщенный c red для демонстрации изменения цвета фона при наведении. При желании вы можете изменить цвет переднего плана, используя класс fb-inner.

Вы также можете узнать больше о заполнениях SVG в этой полезной статье Codepen .

Answer 2

Пробовал делать fill?

.facebook:hover {
    svg{
        fill: red;
        path
        {
            fill: red;
        }
    }

}

попробуйте сначала применить fill только для тега svg, а затем для пути также.