Gestion de l'interaction SVG avec la propriété Pointer Events
Essayez de cliquer ou d'appuyer sur l'image SVG ci-dessous. Si vous placez votre pointeur au bon endroit (le chemin ombré), vous devriez ouvrir la page d'accueil de Smashing Magazine dans un nouvel onglet du navigateur. Si vous avez essayé de cliquer sur un espace blanc, vous pourriez être vraiment confus à la place.
C'est le dilemme auquel j'ai été confronté lors d'un projet récent qui incluait des liens au sein d'images SVG. Parfois, lorsque j'ai cliqué sur l'image, le lien a fonctionné. D'autres fois, ce n'était pas le cas. Confus, non?
Je me suis tourné vers la spécification SVG pour en savoir plus sur ce qui pourrait se passer et si SVG offre une solution. La réponse: pointeur-événements
.
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:
- Valeurs qui nécessitent qu'un élément soit visible; et
- 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.
Source link