Changer dynamiquement la couleur d'un SVG
Changer dynamiquement la couleur d'un SVG

Changer dynamiquement la couleur d'un SVG

Sommaire

Présentation

Comment changer la couleur d'un élément SVG lors d'un hover/pressed/focused/current ou au responsive sans avoir à changer d'image. Rien de plus simple !

Étapes

  • Aller dans Figma.
  • Clic droit sur votre élément svg → Copy/Paste → Copy as SVG
  • Aller dans Webflow
  • Ajouter un embedcode
  • Coller le SVG
  • Changer tous les fill/stroke par "currentColor" → Save & Close
  • Donner une .class à votre embedcode et changer la font-color comme bon vous semble !
  • BONUS 1: Vous pouvez choisir de changer uniquement certaines parties du SVG en currentColor et ainsi avoir par exemple un logo toujours noir avec un seul élément qui change de couleur en fonction des pages.
  • BONUS 2: Le changement de couleur s'effectue sur le font-color donc il fonctionne aussi lors des animations.
  • BONUS 3: Assurez vous d'avoir une balise <title> Blablabla </title> dans votre svg pour les personnes qui utilise des systèmes d'assistances.

Vidéo

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)