Classnamed path inside Symbol of SVG doesn't react on Hover statement of SVG USE

Question

Cann't find the way to make it works:

I marked up pathes of SVG inside symbols with classnames
In outer CSS I made styling rules for those pathes
SVG inserted in HTML using mark up
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?

please take a look at this: stackoverflow.com/questions/13673441/… and this: stackoverflow.com/questions/64633294/… — enxaneta
– enxaneta, Commented Nov 8, 2020 at 9:33
@enxaneta thank you for your answer. Actually I am trying to separate styles from svg code. So I need to find a way to specify in the Shadow DOM the class-named parts of an image described as a SYMBOL. — sPoul
– sPoul, Commented Nov 8, 2020 at 9:45

Alexandr_TT · Accepted Answer · 2020-11-08 10:51:28Z

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.

Collectives™ on Stack Overflow

Classnamed path inside Symbol of SVG doesn't react on Hover statement of SVG USE

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related