SVG 符号内的类命名路径对 SVG USE 的悬停语句没有反应

Question

找不到让它工作的方法：

1. 我用类名在符号中标记了SVG的路径
2. 在外部CSS中，我为这些路径制定了样式规则
3. 使用标记在HTML中插入SVG
4. 悬停事件时，我想用当前类名更改路径的样式

<style>
body>svg{display:none}
.st2,.st2_1{fill:#b0b2b4}
svg:hover .st2_1{fill:#f47456}
</style>
<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>

此处为示例https://codepen.io/sPoul/pen/oNLPrMg

让它只使用CSS可以通过吗？

Answer 1

所以我自己找到答案

body>svg{display:none}
.st2{fill:#b0b2b4}
use{color:#b0b2b4}
a:hover use{color:#f47456}
.st2_1{fill:currentColor}

<a href="#">
<svg clacc="ico_vk">
<use xlink:href="#ico_vk" />
</svg>
</a>

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="ico_vk" viewBox="0 0 24 24">
<path class="st2" d="M20.9 10.51c0 .31-.24.57-.55.57s-.55-.25-.55-.57c0-.31.24-.57.55-.57s.55.26.55.57zm0 0"/>
<path class="st2" d="M20.38 8.29c.25 0 .45-.21.45-.47V5.96c0-.79-.62-1.43-1.38-1.43H4.36c-.41 0-.78.19-1.05.51a.8.8 0 00-.13.13c-.15.24-.23.51-.23.8V18.4c0 .79.62 1.43 1.38 1.43h15.09c.76 0 1.38-.64 1.38-1.43v-5.28c0-.26-.2-.47-.45-.47a.46.46 0 00-.45.47v5.28c0 .28-.22.5-.48.5H4.33c-.27 0-.48-.23-.48-.5V5.88c0-.04.02-.08.04-.12.01-.01.02-.01.03-.02.12-.15.37-.27.55-.27h14.98c.27 0 .48.22.48.5v1.86c0 .25.2.46.45.46z"/>
<path class="st2_1" d="M9.47 14.43c-.24-.48-.48-1.04-.72-1.68s-.47-1.34-.69-2.1h1.09c.05.19.1.39.16.61s.13.44.19.66.13.44.2.65c.07.21.13.4.2.57.06-.17.13-.36.19-.57s.14-.43.2-.65.13-.44.19-.66c.06-.22.12-.42.16-.61h1.06c-.22.76-.45 1.46-.69 2.1-.24.64-.48 1.2-.72 1.68h-.82zM13.3 12.01c.1-.11.21-.23.31-.36.11-.12.21-.25.31-.37l.29-.35c.09-.11.17-.2.23-.29h1.22c-.24.29-.48.57-.71.83-.23.27-.49.54-.76.82.14.13.28.28.43.46s.29.37.43.56c.14.19.26.38.38.57.11.19.21.37.29.53h-1.18c-.07-.13-.16-.26-.25-.41-.09-.15-.19-.3-.3-.45-.11-.15-.22-.3-.33-.44s-.23-.26-.35-.35v1.66h-1.03v-5.4l1.03-.17v3.16z"/>
</symbol>
</svg>

对我来说，解决方案是通过CurrentColor变量传递颜色信息，并使用use标记的颜色属性。