13 avril 2015

Personnaliser un contour sensible via SVG

Un élément HTML contenant un SVG peut tirer profit des <g pour établir des zones sensibles sur mesure : autrement dit, pour redéfinir ses contours. Par exemple, en superposant dans un SVG une image à fond transparent et un <path qui en reprend le contour, il est possible de gérer des événements en fonction du contour précis du vecteur. De l'élément, seul le vecteur bénéficie de la propriété "pointer-events", et il est sans couleur. Sa forme prennd alors la préséance sur la forme rectangulaire de l'élément HTML.

La technique permet d'atteindre un élément situé derrière mais visible via un vide interne - pour le passer en premier plan par exemple - et de gérer la sensibilité au survol, au clic etc. d'un élément selon des contours ainsi totalement redéfinis.
À noter aussi que ces zones sont aisément responsives, peuvent être transparentes ou stylées etc.

Une démo sur Equatorium.

Cela repose aussi partiellement sur JavaScript - gestion des événements, application des classes CSS.

Et s'avère utile pour développer puzzles et autres jeux web, comme je le fais actuellement pour la société Ludwik (ingénierie culturelle).
À noter en passant, outre le caractère responsive des interfaces et de ses composants (voici une loupe), le SVG présente bien d'autres d'autres avantages - dont la génération de la "scène" du puzzle à partir des pièces le constituant.