J'ai un conteneur avec une icône qui est censé remplir deux fonctions :

1. Agit comme un bouton (accessible via clavier/lecteur d'écran etc.)
2. Devenir rouge en survol/mise au point

Lorsque j'utilise le SVG directement dans le balisage, l'effet de survol fonctionne comme prévu, mais je ne peux pas attribuer le rôle de bouton au SVG comme je peux le faire en utilisant la baliseimg:

.container { height: 500px; width: 400px; background-color: lightblue; position: relative; } .favourite-icon { position: absolute; top: 16px; right: 16px; } .favourite-icon:hover { fill: red; }

Cependant, lorsque j'utilise la baliseimg标签时，我可以通过src属性使用 SVG，为img分配按钮角色，但无法在悬停状态下达到预期结果（SVG 保存在其自己的文件并在src, je peux attribuer le rôle de bouton au

en utilisant le SVG via l'attribut src, mais je ne peux pas obtenir le résultat attendu en survol (le SVG est enregistré dans son propre fichier et cité dans src) :

.container { height: 500px; width: 400px; background-color: lightblue; position: relative; } .favourite-icon { position: absolute; top: 16px; right: 16px; } .favourite-icon:hover { fill: red; }

Quelqu'un peut-il me donner des conseils ?

img { max-width: 100%; } img:hover { filter: invert(0.5) sepia(1) hue-rotate(200deg) saturate(4) brightness(1); }