0

My footer includes several SVG codes, some of them are from FontAwesome and some of them were converted to SVG path in AI.

The issue I'm facing is that the SVG codes converted in AI are not taking any transition property on hover, besides those from FA do. The color change on hovering works, it's just the transition that does not. I've tried it also with keyframes, but it worked only on the FA ones.

Markup is in PHP.

#footer-brands:hover {
  transition: var(--transition);
  fill: var(--primary-color);
}
<a href="https://www.flickr.com/photos/145901020@N03/">
  <svg id="footer-brands" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 0 200 200">
  <path d="M151 58a42 42 0 1 0 .1 0z" />
  <path d="M49 58a42 42 0 1 0 .1 0z" />
  </svg>
</a>
<a href="https://github.com">
  <svg id="footer-brands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
  <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
  </svg>
</a>

,

Improve this question
2
  • #footer-brands:hover>path
    – Jawad
    Commented Sep 26, 2022 at 11:45
  • 2
    you have multiple elements with the same id value, that's not valid.
    – Robert Longson
    Commented Sep 26, 2022 at 12:15

1 Answer 1

Reset to default
0

The issue is not in the posted code.

Following code works on both Firefox and Chrome on my desktop:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      #footer-brands {
      transition-property: width;
      transition-duration: 2s;
      transition-timing-function: ease;
      transition-delay: 0s;
      background: red;
      width:100px;
      }
      #footer-brands:hover {
      width: 300px;
      }
    </style>
  </head>
  <body>
    <a href="https://www.flickr.com/photos/145901020@N03/">
      <svg id="footer-brands" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 0 200 200">
        <path d="M151 58a42 42 0 1 0 .1 0z" />
        <path d="M49 58a42 42 0 1 0 .1 0z" />
      </svg>
    </a>
    <a href="https://github.com">
      <svg id="footer-brands" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
        <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 <...>"/>
      </svg>
    </a>      
  </body>
</html>

Maybe you did not specify the right transition ? Or you missed to specify the style of the non-hover svg ? Or the transition you are specifying has no effect on the second svg, due to its size ?

Improve this answer
1
  • The original code started to work since I put it online. I have no idea why but the transition wasn't displaying while running the code on local... Thanks tho!
    – Adam
    Commented Sep 27, 2022 at 8:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.