Webdesign

CSS-Transitions mit SVG

Ein leidiges Thema, SVGs als Logo in den Header bauen und dann schöne CSS-Übergänge bei der Farbe über Transitions.


Da dies nicht über das „fill“-Attribut gelöst werden kann, muss man hier auf eine andere Lösung zurückgreifen:

HTML (stark vereinfacht):

<a>
  <svg>
    <path fill="currentColor" d="....">
  </svg>
</a>

CSS:

a{
  color: red;
}

a:hover{
  color: blue;
}