SVG 符号中的类名路径不会对 SVG USE 的 Hover 语句做出反应

Question

Cann't find the way to make it works:

1. I marked up pathes of SVG inside symbols with classnames
2. In outer CSS I made styling rules for those pathes
3. SVG inserted in HTML using mark up
4. On hover event I want to change styling of path with current classname

    <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>

Example here https://codepen.io/sPoul/pen/oNLPrMg

Is it passable to make it works with CSS only?

Answer 1

So I find the answer by myself

 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>

The solution for me is to pass color information through the CurrentColor variable and use the color property of the USE tag.