Gestion de l'interaction SVG avec la propriété Pointer Events

A ne pas confondre avec DOM ( D document O bjet M odel) ] pointer events pointer-events est à la fois une propriété CSS et un attribut d'élément SVG. Avec elle, nous pouvons gérer quelles parties d'un document ou élément SVG peuvent recevoir des événements d'un périphérique de pointage tel qu'une souris, un trackpad ou un doigt.

Note sur la terminologie: "événements de pointeur" est aussi le nom d'un device-agnostic fonctionnalité de plate-forme Web pour la saisie par l'utilisateur. Cependant, dans cet article – et pour les besoins de la propriété pointer-events – l'expression "événements de pointeur" inclut également les événements mouse et touch

Outside Of The Box: "Shape Model" de SVG [19659007] L'utilisation de CSS avec HTML impose un modèle de mise en forme de boîte sur HTML. Dans le modèle de disposition des boîtes, chaque élément génère un rectangle autour de son contenu. Ce rectangle peut être inline, inline-level, atomic inline-level ou block, mais c'est toujours un rectangle avec quatre angles droits et quatre arêtes. Lorsque nous ajoutons un lien ou un écouteur d'événement à un élément, la zone interactive correspond aux dimensions du rectangle.

Note : Ajout d'un clip-path à un élément interactif modifie ses limites interactives. En d'autres termes, si vous ajoutez un chemin clip-path hexagonal à un élément a seuls les points dans le chemin de détourage seront cliquables. De même, l'ajout d'une transformation de biais transformera les rectangles en losanges.

SVG n'a pas de modèle de disposition de boîte. Vous voyez, quand un document SVG est contenu par un document HTML, dans une mise en page CSS, l'élément SVG racine adhère au modèle de mise en page boîte. Ses éléments enfants ne le font pas. Par conséquent, la plupart des propriétés liées à la mise en page CSS ne s'appliquent pas à SVG.

Donc, à la place, SVG a ce que j'appellerai un «modèle de forme». Lorsque nous ajoutons un lien ou un écouteur d'événement à un document ou un élément SVG, la zone interactive ne sera pas nécessairement un rectangle. Les éléments SVG do ont une boîte englobante . La boîte englobante est définie comme suit: le rectangle le plus serré aligné avec les axes du système de coordonnées utilisateur de cet élément qui le délimite entièrement et ses descendants. Mais au départ, quelles parties d'un document SVG sont interactives dépend des parties qui sont visibles et / ou peintes .

Éléments peints ou visibles

Les éléments SVG peuvent être " rempli "mais ils peuvent aussi être" caressés ". Remplir fait référence à l'intérieur d'une forme. Stroke se réfère à son contour.

Ensemble, "fill" et "stroke" sont opérations de peinture qui rendent des éléments à l'écran ou la page (également connu sous le nom de ). Quand nous parlons de éléments peints nous voulons dire que l'élément a un remplissage et / ou un coup. Habituellement, cela signifie que l'élément est également visible.

Cependant, un élément SVG peut être peint sans être visible. Cela peut arriver si la valeur d'attribut visible ou la propriété CSS est cachée ou quand affiche est none . L'élément est là et occupe un espace théorique. Nous ne pouvons tout simplement pas le voir (et la technologie d'assistance peut ne pas le détecter).

Peut-être plus confusément, un élément peut également être visible – c'est-à-dire avoir une valeur de visibilité de - sans être peint. Cela se produit lorsque les éléments manquent à la fois d'un trait et d'un remplissage.

Note : Valeurs de couleur avec transparence alpha (par exemple rgba (0,0,0,0) ) n'affecte pas si un élément est peint ou visible. En d'autres termes, si un élément a un remplissage ou un trait alpha transparent, il est peint même s'il ne peut pas être vu.

Savoir quand un élément est peint, visible ou non est crucial pour comprendre l'impact de chaque valeur de pointeur-événements .

Tout ou rien ou quelque chose entre: les valeurs

pointer-events est à la fois une propriété CSS et un attribut d'élément SVG. Sa valeur initiale est auto ce qui signifie que seules les parties peintes et visibles recevront des événements de pointeur. La plupart des autres valeurs peuvent être divisées en deux groupes:

1. Valeurs qui nécessitent qu'un élément soit visible; et
2. valeurs qui ne sont pas

peintes remplissent accident vasculaire cérébral et toutes entrent dans cette dernière catégorie. Leurs homologues dépendantes de la visibilité - visiblePeint visibleFill visibleStroke et visible - tombent dans la première.

La spécification SVG 2.0 définit également une valeur bounding-box . Lorsque la valeur de pointer-events est bounding-box la zone rectangulaire autour de l'élément peut également recevoir des événements de pointeur. Au moment de la rédaction de ce document, seul Chrome 65+ prend en charge la valeur de la boîte englobante

none est également une valeur valide. Il empêche l'élément et ses enfants de recevoir des événements de pointeur. La propriété CSS pointer-events peut également être utilisée avec des éléments HTML. Mais lorsqu'il est utilisé avec du code HTML, seuls auto et aucun sont des valeurs valides.

Depuis les valeurs pointeur-événements sont mieux démontrées qu'expliquées, regardons démos.

Ici, nous avons un cercle avec un remplissage et un trait appliqué. C'est à la fois peint et visible . Le cercle entier peut recevoir des événements de pointeur, mais la zone en dehors du cercle ne peut pas.

Voir le stylo Visible vs peint en SVG par Tiffany Brown ( @webinista ) le ] CodePen .

Désactiver le remplissage, de sorte que sa valeur soit none . Maintenant, si vous essayez de survoler, cliquez ou appuyez sur l'intérieur du cercle, rien ne se passe. Mais si vous faites la même chose pour la zone de trait, les événements de pointeur sont toujours distribués. En changeant le remplissage valeur en aucun signifie que cette zone visible mais pas peinte .

Faisons un petit changement à notre balisage. Nous allons ajouter pointer-events = "visible" à notre élément circle tout en conservant fill = none .

Voir le stylo How ajouter des événements de pointeur: tous affecte l'interactivité par Tiffany Brown ( @webinista ) le CodePen .

Maintenant, la zone non peinte entourée par le trait peut recevoir des événements de pointeur. 19659032] Augmentation de la zone cliquable d'une image SVG

Revenons à l'image du début de cet article. Notre "améthyste" est un élément path par opposition à un groupe de polygones ayant chacun un trait et rempli . Cela signifie que nous ne pouvons pas simplement ajouter pointer-events = "all" et l'appeler un jour.

Au lieu de cela, nous devons augmenter la zone de clic. Utilisons ce que nous savons des éléments peints et visibles. Dans l'exemple ci-dessous, j'ai ajouté un rectangle à notre balisage d'image

Voir le stylo Augmentation de la zone de clic d'une image SVG par Tiffany Brown ( @webinista ) CodePen .

Même si ce rectangle est invisible, il est toujours techniquement visible (c'est-à-dire visibilité: visible ). Son manque de remplissage, cependant, signifie qu'il n'est pas peint . Notre image est la même. En effet, il fonctionne toujours de la même manière - un clic sur un espace blanc ne déclenche toujours pas d'opération de navigation. Nous devons toujours ajouter un attribut pointer-events à notre élément . En utilisant le visible ou tous les valeurs travailleront ici

Voir le stylo Augmentant la zone de clic d'une image SVG par Tiffany Brown ( @ webinista ) le CodePen .

Maintenant, toute l'image peut recevoir des événements de pointeur.

L'utilisation de bounding-box éliminerait le besoin d'un élément fantôme. Tous les points dans la boîte englobante recevraient des événements de pointeur, y compris l'espace blanc entouré par le chemin. Mais encore une fois: pointer-events = "bounding-box" n'est pas largement supporté.

Utilisation des événements de pointeur Lors de la combinaison SVG et HTML

Un autre cas où pointer-events peut être utile: utiliser SVG à l'intérieur

Voir le Pen Ovxmmy par Tiffany Brown ( @webinista ) sur CodePen .

Dans la plupart des navigateurs Firefox et Internet Explorer 11 sont des exceptions ici - la valeur de event.target sera un élément SVG au lieu de notre bouton HTML. Ajoutons pointer-events = "none" à notre balise SVG d'ouverture

Voir le Pen Comment les événements pointeur: aucun ne peut être utilisé avec SVG et HTML par Tiffany Brown ( @webinista ) le CodePen .

Maintenant, lorsque les utilisateurs cliquent ou tapent sur notre bouton, le event.target se référera à notre bouton ]

Ceux qui connaissent bien le DOM et JavaScript noteront qu'en utilisant le mot-clé function au lieu d'une fonction de flèche et ce au lieu de event.target corrige ce problème. L'utilisation de pointer-events = "none" (ou pointer-events: none; dans votre CSS), signifie que vous n'avez pas besoin de valider cette particularité JavaScript en mémoire

Conclusion

SVG supporte le même type d'interactivité que nous avons l'habitude de faire avec HTML. Nous pouvons l'utiliser pour créer des graphiques qui répondent aux clics ou aux taps. Nous pouvons créer des zones liées qui ne respectent pas le modèle de boîte CSS et HTML. Et avec l'ajout de pointer-events nous pouvons améliorer le comportement de nos documents SVG en réponse à l'interaction de l'utilisateur

Le support du navigateur pour les événements pointeurs est robuste. Chaque navigateur prenant en charge SVG prend en charge la propriété pour les documents et éléments SVG. Lorsqu'il est utilisé avec des éléments HTML le support est légèrement moins robuste. Il n'est pas disponible dans Internet Explorer 10 ou ses prédécesseurs, ni dans aucune version d'Opera Mini.

Nous venons de gratter la surface de pointer-events dans cette pièce. Pour un traitement technique plus approfondi, lisez la spécification SVG . Web Docs de MDN (Mozilla Developer Network) offre une documentation plus conviviale pour les pointer-events avec des exemples.

(rb, ra, yk, il)