Pourquoi :hover ne fonctionne-t-il pas sur les éléments SVG et quelle est l'alternative ?

Élément SVG USE et style :hover – Un problème de prise en charge du navigateur

Lors de la tentative d'application du style :hover aux éléments SVG intégrés via < défs> en utilisant , certains navigateurs peuvent rencontrer des limitations.

La limitation de prise en charge du navigateur

La spécification SVG indique clairement que les sélecteurs CSS2 ne peuvent pas être appliqués au DOM conceptuellement cloné arborescence des éléments référencés par . Cela signifie que :hover ne peut pas être utilisé pour cibler des éléments spécifiques dans l'objet intégré.

L'exception de Firefox

Firefox se distingue comme une exception, prenant en charge l'adressage des « virtuels " éléments inclus via trou de ver. Cependant, d'autres navigateurs ne partagent pas cette fonctionnalité.

Une approche alternative utilisant currentColor

Au lieu de s'appuyer sur :hover, une approche plus largement prise en charge consiste à définir le paramètre référencé valeur de remplissage ou de contour de l'élément à currentColor. En modifiant la propriété color du paramètre Au survol de l'élément référencé, la couleur de remplissage ou de trait de l'élément référencé change en conséquence.

Voici un exemple :

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

En employant cette technique, vous pouvez modifier efficacement la couleur de remplissage ou de trait du SVG intégré. lorsque l'option l'élément est survolé, imitant ainsi l'effet de :hover sur ces éléments.

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!