Pourquoi les styles :hover ne fonctionnent-ils pas sur les éléments SVG `` et comment puis-je contourner ce problème ?

Résolution des éléments SVG intégrés avec Use et :hover Style

Comprendre le problème

Lorsque vous essayez d'appliquer des styles :hover à des éléments SVG intégrés à l'aide de tag, on peut rencontrer des difficultés. Cela vient du fait que les éléments référencés via ne font pas partie de la structure formelle du document, ce qui rend difficile leur traitement direct avec les sélecteurs CSS.

Pourquoi : les styles de survol ne fonctionnent pas

Conformément à la spécification d'élément d'utilisation SVG, les sélecteurs CSS ne peut pas être appliqué à l’arborescence conceptuelle DOM où résident les éléments référencés. Cela signifie que les pseudoclasses :hover ne fonctionneront pas sur ces éléments, vous empêchant d'appliquer des styles interactifs.

L'exception Firefox

Bien que la plupart des navigateurs ne prennent pas en charge le traitement des éléments « virtuels » intégrés via < use>, Firefox constitue une exception. Il permet de modifier les couleurs de remplissage ou de trait en définissant leurs valeurs sur « currentColor » dans l'élément référencé et en modifiant la propriété color de l'attribut élément en survol.

Une approche alternative

Une méthode alternative pour obtenir des effets de survol sur les éléments SVG intégrés implique l'utilisation de 'currentColor'. En définissant l'attribut de remplissage ou de trait de l'élément référencé sur 'currentColor' et en modifiant la couleur de l'attribut élément en survol, les navigateurs peuvent mettre à jour la couleur actuelle héritée. Cette technique offre une solution de contournement, même si elle ne fournit pas toute la gamme des capacités de style offertes par les pseudoclasses :hover.

Exemple

Considérez le code SVG suivant :

<svg>
  <style>
    #p0 { fill: currentColor; }
    #use1:hover { color: green; }
    #use2:hover { color: red; }
    #use3:hover { color: blue; }
  </style>

  <defs>
    <polygon>

Lorsque vous survolez chacune des options éléments, leurs formes respectives changeront de couleur en vert, rouge ou bleu en fonction de la couleur spécifiée dans leurs règles de survol.

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!