Html 带有内嵌SVG和文本的锚定悬停

我不知道如何实现这一点，但我有一个SVG内嵌在锚标记中的一些文本包装器中。但是当SVG作为一个整体悬停在锚上时，它不会改变颜色，只会改变文本。一旦您将鼠标悬停在SVG上，它将改变颜色，但我想知道如何触发整个悬停状态

CSS:

    a, a svg {
    color: #fff;
    }

    a:hover {
      color: #111;
    }

    a svg:hover { 
      fill: #111;
    }

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

HTML:

    a, a svg {
    color: #fff;
    }

    a:hover {
      color: #111;
    }

    a svg:hover { 
      fill: #111;
    }

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

---

我可以发誓我在其他地方使用过它，但我不知道为什么它在这里不起作用。

默认情况下，svg的填充颜色显示为

#111

，因此您需要在CSS中更改svg正常状态的填充颜色。我不知道你是不是想把文字改成白色，但是如果你需要的话，你可以改变

a，一个svg{
颜色：#fff；
填充：#FF0000；
}
a:悬停{
颜色：#111；
}
a:悬停svg{
填充：#111；
}

---

为路径指定一个属性，它将从其父路径继承填充颜色

a{
颜色：#fff；
}
a:悬停{
颜色：#111；
}

---

shaboom，真管用！不知道

currentColor

属性。谢谢