27799 sujets

CSS et mise en forme, CSS3

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 !
Modérateur
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)
Modérateur
Bonjour,

Si c'est le résultat qui compte, tu peux mettre deux éléments identiques l'un sur l'autre dans ton svg. Tu mets dans le css pour le premier élément un fill avec ta couleur finale, et pour le deuxième un fill avec le pattern contenant l'image. Ensuite, il suffit de faire varier l'opacité du deuxième élément au survol pour obtenir l'effet désiré.

Après il se peut qu'un jour ça puisse le faire directement sans artifice comme tu l'imaginais. Mais quand on voit comment c'est laborieux quand on essaie de faire une transition avec la propriété background, on se dit que c'est pas près de fonctionner parfaitement avec fill demain matin.

Amicalement,
Meilleure solution