IP Girl
  1. IP Girl
  3. Utilisation de CSS pour effectuer la transition de la propriété fill d’un chemin SVG en survol
Intereting Posts
__FILE__, __LINE__ et l’utilisation de __FUNCTION__ en C ++ Comment puis-je marquer / mettre en évidence des lignes en double dans l’éditeur de VI? Comment vérifier la date du dernier changement dans la procédure stockée ou la fonction dans le serveur SQL Java a-t-il une méthode de jonction de chemin? Est-il possible d’utiliser pythonappend avec la nouvelle fonctionnalité intégrée de SWIG? Comment implémenter la compression GZip dans ASP.NET? Utiliser jQuery pour voir si un div a un enfant avec une certaine classe Générateur de Guidage Séquentiel ListView addHeaderView provoque une augmentation de la position de un? Afficher la liste non ordonnée en ligne, mais conservez les puces Obtenir l’index de la nième occurrence d’une chaîne? Git: affiche toutes les différentes modifications apscopes à une seule ligne d’un fichier spécifié sur l’ensemble de l’historique de git Comment désactiver la mise en évidence de l’icône de l’application? Comment puis-je “récupérer” et “git merger” depuis une twig de suivi à distance (comme “git pull”) Mot-clé pour la classe externe d’une classe interne anonyme

Utilisation de CSS pour effectuer la transition de la propriété fill d’un chemin SVG en survol

J’inclus un fichier d’image SVG sur ma page dans une balise d’ object , comme ceci:

L’image en question est une carte du monde, je veux transformer la propriété de fill lorsque la souris survole un group . Dans ce cas, j’ai regroupé mon SVG par continent, de sorte que l’Amérique du Sud ressemble à ceci:

Je peux faire en sorte que la propriété fill change lors du survol en utilisant le code CSS suivant en haut de mon document SVG: 

  #south_america path { transition: fill .4s ease; } #south_america:hover path { fill:white; }

Mais je ne peux pas obtenir la couleur de fondu avec une transition CSS, la couleur change juste instantanément, est-ce que quelqu’un peut éclairer ceci s’il vous plaît?

Afin de faire la transition / fondu, CSS a besoin d’une valeur de départ et d’une valeur de fin.
Comme vous définissez la couleur du chemin à l’aide de l’atsortingbut SVG fill="#FAFAFA" , CSS ne le traite pas et la transition ne s’estompe pas.

Au lieu de cela, si vous utilisez CSS pour définir la couleur, la transition se comportera comme prévu

Donc, tout ce que je devais faire pour faire le travail de transition, c’est de donner à la #europe une #europe départ. 

  path { transition: fill .4s ease; } /* set fill for before and for during hover */ #europe path { fill: red; } #europe:hover path { fill: white; }

Voici un JSFiddle qui fonctionne.

Ou, le faire en ligne peut être plus pratique ( style="" ):

Juste pour que CSS puisse faire votre fondu, il doit gérer les valeurs de début et de fin en CSS / inline style (par opposition à utiliser l’atsortingbut SVG fill= ).