SVG hover effect multiple paths

programming web dev
1

Hi.
I’m trying to add a hover effect on SVG icon, it does work perfectly on the icons with the unique path, I can easily change the fill color of the icon and the fill color on hover. Exemple:

<svg style="display:none;" xmlns="http://www.w3.org/2000/svg">
            <symbol id="fb">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.8086 20V12.2657H16.416L16.8066 9.23832H13.8086V7.31023C13.8086 6.43574 14.0514 5.83988 15.3053 5.83988H16.8945V3.13953C16.618 3.10277 15.6694 3.02051 14.5656 3.02051C12.2609 3.02051 10.6836 4.42676 10.6836 7.01039V9.23832H8.08594V12.2657H10.6836V20H13.8086Z">
            </symbol>
            </svg>

  <span> <svg width="42" height="36" class="icon_interactif">
                                        <use href="#fb"></use>
                                    </svg></span>

.icon_interactif {
    cursor: pointer;
    fill: red;
    transition: fill 0.3s ease-in-out;


    &:hover {
        fill: yellow;
    }  
}

But, the hover effect doesn’t work on the icons with multiple paths. I can change the fill color of the icon, but nothing happens on the hover. Tried so many, times. Nothing works.
Could you please help. How would you add the hover effect on this icon?

 <svg style="display:none;" xmlns="http://www.w3.org/2000/svg">
                    <symbol id="youtube">
                    <path class="path1" fill-rule="evenodd" clip-rule="evenodd" d="M28.4443 3.12501C28.1155 1.90306 27.1521 0.939889 25.9306 0.610864C23.6985 0 14.77 0 14.77 0C14.77 0 5.84176 0 3.60967 0.587577C2.41146 0.916379 1.42455 1.90329 1.09575 3.12501C0.508392 5.35688 0.508392 9.98563 0.508392 9.98563C0.508392 9.98563 0.508392 14.6377 1.09575 16.8463C1.42477 18.068 2.38795 19.0314 3.6099 19.3604C5.86527 19.9713 14.7702 19.9713 14.7702 19.9713C14.7702 19.9713 23.6985 19.9713 25.9306 19.3837C27.1523 19.0549 28.1155 18.0915 28.4445 16.8697C29.0318 14.6377 29.0318 10.0091 29.0318 10.0091C29.0318 10.0091 29.0554 5.35688 28.4443 3.12501Z">
                    <path class="path2" fill-rule="evenodd" clip-rule="evenodd" d="M11.9273 14.2619L19.3517 9.98568L11.9273 5.70947V14.2619Z">
                    </symbol>
                    </svg>

 <span>
                                        <svg width="42" height="36">
                                            <use href="#youtube"></use>
                                        </svg>
                                    </span>

.path1{
    cursor: pointer;
    fill: red;
    transition: fill 0.3s ease-in-out;

   

    &:hover {
        fill: yellow;
    }  
}

.path2{
    cursor: pointer;
    fill: white;
    transition: fill 0.3s ease-in-out;

   

    &:hover {
        fill: yellow;
    }  
}

And also surprisingly the inner fill of the icon doesn’t turn to white :frowning:
Screenshot 2022-05-17 at 14.23.14

Could you please help.
Thank you very much in advance for your help.

2

Hey Helena,

It looks like you need to close off your <path> tags like either:

  • <path d = 'M1 M2 M3"/> or
  • <path d = 'M1 M2 M3"> </path>

The browser is trying to nest .path2 inside .path1

You can get each fill to separately change color AND path1:hover ~ {} can change .path2 BUT .path2: hover cant change .path1's fill color because CSS follows the cascade…

You will need to either:

  • use Javascript
  • create another <path> similar to .path1 but with the .path2 cut out of the center and put it after .path2 but have it display: none. Then have .path2:hover ~ { fill: yellow; display: block }

Also on a side note its good to have the following in your <svg> tags

version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"

You can omit the height/ width and create responsive SVG’s as long as you have the viewBox.

Let us know if you have any other problems :slightly_smiling_face:

3

Thank you very much @steve.mills for the detailed answer.
This will help a lot for my future projects.

1 Like