Puis-je appliquer des styles CSS :hover aux éléments SVG ?

Pouvez-vous appliquer le style :hover à un élément SVG USE ?

Styler des éléments SVG intégrés dans un fichier section utilisant la pseudoclasse CSS :hover peut être difficile. Malgré leur présence dans le DOM, ces éléments ne peuvent pas être ciblés directement en raison de la manière dont les SVG sont structurés.

Comprendre la problématique :

La spécification SVG précise que le clonage des éléments référencés dans le fichier La section dans l'arborescence DOM n'inclut aucune propriété CSS ni valeur en cascade. Cela signifie que les sélecteurs CSS2 ne peuvent pas être appliqués aux éléments clonés dans les éléments référencés, ce qui rend impossible le ciblage direct de ces éléments avec les styles :hover.

Support partiel dans Firefox :

Bien que la plupart des navigateurs ne prennent pas en charge le ciblage direct des éléments virtuels au sein d'une référence, Firefox offre un support partiel. Il permet de modifier les couleurs de remplissage ou de trait en attribuant currentColor à l'élément référencé, puis en modifiant la propriété color de l'attribut élément en survol.

Support limité du navigateur :

Cependant, cette approche a une compatibilité limitée et ne doit être utilisée que si elle cible spécifiquement Firefox. Pour des raisons de compatibilité entre navigateurs, d'autres méthodes doivent être utilisées.

Solutions alternatives :

Une méthode pour résoudre ce problème consiste à utiliser JavaScript pour manipuler le DOM SVG au moment de l'exécution. et appliquez dynamiquement des styles de survol aux éléments virtuels. Bien que cette approche offre plus de flexibilité, elle nécessite des scripts supplémentaires et peut ne pas convenir à tous les scénarios.

Une autre solution consiste à utiliser éléments en combinaison avec des masques. En définissant un chemin de clip dans le fichier et en le liant à un masque appliqué à la section élément, vous pouvez obtenir des effets de pseudo-survol sans cibler directement les éléments virtuels. Cette méthode offre une meilleure prise en charge du navigateur et est plus conforme aux principes SVG.

Conclusion :

Application de la pseudoclasse :hover aux éléments SVG intégrés à l'aide de l'option La balise n'est pas simple en raison des limitations de la spécification SVG. Une prise en charge partielle existe dans Firefox, mais pour des raisons de compatibilité entre navigateurs, des approches alternatives telles que la manipulation JavaScript ou le masquage doit être envisagé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!