[Résolu] Transition CSS entre un fill: url et un fill: color

Salut à tous,

Je suis aujourd'hui confronté à un problème inattendu. Je travaille avec des éléments SVG, et j'utilise la propriété

fill:url('test.jpg');

Ca fonctionne très bien, seulement voilà : j'aimerais faire une transition fluide vers un

fill:#d7bd32;

grâce à un hover, sauf que ça ne fonctionne pas du tout. La transition ne s'applique pas et le changement est instantané. Lien vers un fiddlejs de quelqu'un d'autre qui illustre bien la situation :
LIEN ICI

Sur ce fiddlejs, l'afrique est représentée par une image de fond. Quand on passe la souris, j'aimerais qu'elle passe en blanc (ou autre couleur) avec un léger effet de transition. Comme vous pouvez le voir sur l'Europe, ça fonctionne bien quand il ne s'agit que de deux couleurs.

Il n'y a peut-être pas de solution, mais je tente ma chance. Merci à tous ceux qui prendront du temps pour m'aider !

Bonjour,

Ce qui aurait été inattendu, c'est que ça puisse fonctionner.

Je suis curieux de savoir comment tu fais marcher ton fill:url('test.jpg'); sur un élement svg.

Amicalement,

Ca fonctionne avec un élément html "pattern" ajouté dans mon code svg :

<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="800">
    <image href="url-de-l-image.jpg" x="-20" y="270" width="600" height="300"></image>
  </pattern>

Ensuite je fais référence à cet élément en faisant

fill:url('#img1')

(oui, j'ai fait un petit raccourci dans mon post de base, je comprends que tu aies pensé que ça ne fonctionnait pas)
Modifié par Myrial (18 Mar 2022 - 15:57)

Merci, je vais tester ça !