Pourquoi mon CSS :hover ne fonctionne-t-il pas sur les éléments SVG intégrés avec ``, et comment puis-je y remédier ?

Style des éléments SVG intégrés via using :hover CSS

Dans votre code fourni, vous essayez de styliser les éléments SVG intégrés à l'aide de :hover CSS, mais cela ne fonctionne pas pour les éléments à l'intérieur d'un groupe référencé à l'aide d'un élément. En effet, selon la spécification SVG, les sélecteurs CSS ne peuvent pas être appliqués aux arbres DOM clonés résultant du clonage d'éléments via .

Support Firefox et solution de contournement

Firefox est le seul navigateur qui prend en charge l'adressage des éléments virtuels inclus via une option trou de ver. Cependant, ce n'est pas le cas des autres navigateurs.

Une solution de contournement consiste à utiliser currentColor pour appliquer des couleurs différentes aux éléments dotés de propriétés de remplissage ou de contour lorsque l'option la propriété color de l'élément est modifiée au survol. Par exemple :

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

Une alternative possible

Une approche alternative pour atteindre votre objectif consiste à utiliser JavaScript pour modifier les éléments SVG lors des événements de survol de la souris. Cela impliquerait d'ajouter des écouteurs d'événements à chaque élément puis mise à jour des attributs ou des styles des éléments pertinents au sein de chaque groupe.

Choisir la bonne solution

Le choix entre la solution de contournement CSS compatible Firefox et JavaScript L'approche basée sur les fonctionnalités dépend de la prise en charge du navigateur et des exigences spécifiques de votre projet. Si la compatibilité du navigateur est critique, utilisez la méthode JavaScript. Sinon, vous pouvez choisir la solution CSS pour sa simplicité et sa facilité de mise en œuvre.

Autres considérations

Pour obtenir l'effet de survol souhaité sur des parties spécifiques de l'objet intégré, vous Il peut être nécessaire d'utiliser du JavaScript supplémentaire pour modifier les attributs ou les styles d'éléments spécifiques au sein de chaque groupe lors du survol. JavaScript offre plus de flexibilité pour la manipulation dynamique des éléments, vous permettant de cibler et de modifier des éléments individuels dans l'objet intégré.

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!