web-dev-qa-db-fra.com

Utilisation de CSS pour la transition de la propriété de remplissage d'un chemin SVG en survol

J'inclus un fichier image SVG sur ma page au sein d'une balise object, comme ceci:

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

L’image en question est une carte du monde. Je souhaite effectuer la transition de la propriété fill lorsque la souris passe au-dessus d’un group. Dans ce cas, j’ai regroupé mes fichiers SVG par continent. quelque chose comme ça:

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

Je peux obtenir la propriété fill à changer en survol en utilisant le CSS suivant en haut de mon document SVG:

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

Mais je ne parviens pas à faire passer la couleur fill avec une transition CSS, la couleur change instantanément, est-ce que quelqu'un peut nous éclairer à ce sujet, s'il vous plaît?

csssvghovercss-transitions
49
David Alsbright

Pour effectuer une transition/un fondu, CSS a besoin d'une valeur de départ et d'une valeur de fin.
Vous définissez la couleur du chemin à l'aide de l'attribut SVG fill="#FAFAFA", CSS ne le traite pas et la transition ne s’efface pas.

Si vous utilisez CSS pour définir la couleur, la transition se comportera comme prévu.

Donc, tout ce que je devais faire pour que la transition fonctionne, c'est de donner le #europe un remplissage de départ pour la transition.

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

Voici un travail JSFiddle .

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

<path style="fill: #FAFAFA;" d="..."/>

Juste pour que CSS fasse votre fondu, il doit gérer les valeurs de début et de fin en style CSS/inline (au lieu d’utiliser SVG fill= _ attribut).

100
Robbie Wxyz

Notez que pour styler un SVG via CSS à partir d’un document HTML, le SVG doit être incorporé dans le code HTML de la page, c’est-à-dire qu’il ne fonctionne pas en l’incorporant via <object> ou <img> en HTML ou via background-image etc. en CSS.

Une fois incorporé dans votre code HTML, vous pouvez styler tous ses éléments comme vous le feriez avec un sélecteur CSS afin de faire correspondre les éléments que vous souhaitez styler et de lui appliquer les styles appropriés. Outre fill, il existe de nombreux autres attributs SVG, qui sont également des propriétés CSS. On en trouvera une liste dans le spécification SVG ou sur MDN .

Pour qu'une transition fonctionne, les valeurs de début et de fin doivent être définies en CSS. Ainsi, au lieu de définir la couleur de remplissage via l'attribut fill (fill="#FAFAFA"), il doit être défini via l'attribut style, qui ressemble à ceci:

<path style="fill: #FAFAFA;" d="..."/>

ou via une règle CSS empaquetée dans un <style> élément dans le SVG:

<style type="text/css">
  #south-america > path {
    fill: #FAFAFA;
  }
</style>

Dans les deux cas, vous pouvez ensuite transférer les valeurs via la règle CSS que vous avez mentionnée.

L’incorporation du fichier SVG dans le code HTML offre l’avantage de pouvoir créer le style à partir de la feuille de style que vous utilisez pour votre code HTML. Vous pouvez ainsi définir un style partagé entre le code HTML de votre page et le fichier SVG incorporé.

2
Sebastian Zartner