悬停时更改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 技术来更改填充颜色。

使用 Facebook SVG 的示例（去除不必要的字符）：

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>

我从 Facebook 的品牌指南中获取了 #4267B2 颜色，并使用通用的 red 来演示悬停时的背景颜色变化。如果需要，您可以使用 fb-inner 类来更改前景色。

您还可以在this useful Codepen article 中了解有关 SVG 填充的更多信息。

Answer 2

试过fill 吗？

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

}

先尝试将fill 仅应用于 svg 标签，然后再为路径应用。