SVG Multiplication d'événements

Question

J'ai deux retours SVG, où l'un est logiquement l'un sur l'autre en termes de position x et y. Maintenant, lorsque vous survolez le rectangle supérieur, je veux que le rect dessous soit la cible de l'événement. Mais si je souris en haut rect, je veux que ce soit la cible.

Cette fonctionnalité différente basée sur le type d'événement est ce qui rend la propriété css "pointer-event" inutile pour moi.

Comment puis-je accomplir ceci?

Answer 1

les envelopper avec un <g> et ajouter des écouteurs d'événement sur elle. Vous devez conserver des références aux enregistrements par quelque moyen que ce soit (comme la propriété id) et les utiliser directement dans les gestionnaires d'événements. Votre cas spécifique est assez facile à gérer de cette façon.

Answer 2

Je ne sais pas SVG beaucoup, mais voici comment je le résoudre en HTML & CSS:

#upper:hover + #lower { /* What happens with the lower rect when the upper is hovered */ } 
#upper:active { /* What happens if the upper is clicked/selected */ }