Événements SVG : adapte les zones cliquables au dessin

SVG pointer-events contrôle quelles parties d’une illustration peuvent devenir la cible d’un événement de pointeur. Une forme remplie, un contour fin et un trou vide peuvent réagir différemment même s’ils appartiennent à la même illustration. Définis la zone cible selon l’action attendue par le lecteur, puis teste les espaces vides aussi soigneusement que les espaces colorés.

Ce guide concerne les illustrations utilisées dans une interface web : diagramme sélectionnable, emblème cliquable ou icône dans un bouton. Si le SVG contient déjà des tracés utilisables, corrige directement son code d’interaction. La vectorisation intervient uniquement lorsque la géométrie modifiable est encore enfermée dans un PNG ou JPG.

Commence par l’élément qui reçoit le clic

Pour SVG, la valeur auto par défaut se comporte comme visiblePainted. Une forme visible peut être ciblée sur son remplissage si fill n’est pas none, ou sur son contour si stroke n’est pas none. La spécification d’interactivité SVG définit ces règles de détection.

Cela explique une icône apparemment défaillante : son gestionnaire peut fonctionner sur la bordure mais manquer le centre vide. Le navigateur teste la forme ; il ne suppose pas que chaque point de son rectangle environnant signifie la même chose.

Voici les choix utiles pour ce processus :

all ne signifie pas « chaque point de la zone d’affichage SVG ». Il désigne encore la géométrie de l’élément. Si tu veux qu’un rectangle précis autour d’un dessin délicat réponde, crée volontairement ce rectangle.

Distingue aussi une couleur transparente d’une absence de couleur. fill="transparent" reste une valeur de remplissage ; fill="none" supprime le remplissage. L’opacité seule n’est pas un moyen fiable de faire ignorer les clics à un élément superposé.

Teste un remplissage, un trou et un contour ouvert

Nous avons construit un petit laboratoire SVG en ligne avec des formes originales créées à la main. Il contient un tracé composé bleu avec un trou rectangulaire, un contour ouvert orange et une copie de ce contour sur une cible transparente distincte. Ce sont des exemples pédagogiques, pas des conversions PerfectVector.

Dans le test de navigateur, cliquer sur la bande bleue enregistrait ring. Cliquer sur son centre vide enregistrait ring-stage, le SVG englobant. La ligne orange enregistrait trail, tandis que l’espace sous son sommet enregistrait stroke-stage. Dans le troisième panneau, les deux emplacements enregistraient hit.

Le tracé bleu utilise deux sous-tracés rectangulaires et fill-rule="evenodd" :

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

Le rectangle intérieur est hors de la région remplie selon la règle de remplissage pair-impair. C’est un véritable trou. Un rectangle blanc superposé serait une autre forme peinte avec son propre comportement de cible. Si la géométrie elle-même est incorrecte, utilise le guide de réparation des trous SVG avant de changer les règles d’événements.

Voici le contour ouvert du deuxième panneau :

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

Pour un test rapide, place l’un des extraits dans un fichier HTML avec ce script de journalisation après lui. Donne au SVG une taille visible, comme width="360" height="270".

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

Clique sur la région peinte, un intérieur vide et un angle hors du dessin. Enregistrer event.target distingue une cible de tracé d’un clic qui a simplement atteint le conteneur SVG. Ces exemples testent la sélection de cible ; ce ne sont pas des commandes interactives terminées.

Ajoute une cible sans épaissir l’illustration

Supposons que toute la zone autour du tracé orange doive le sélectionner. Augmenter son contour visible changerait l’illustration. Une cible distincte permet à la zone d’interaction d’avoir sa propre géométrie :

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

Le rectangle se trouve derrière l’illustration. Le tracé orange ignore le ciblage du pointeur : le rectangle peut donc recevoir les clics à travers lui. Ses coordonnées définissent explicitement la cible souhaitée ; les données du tracé visible restent identiques au deuxième panneau.

Cette méthode est utile pour une région de diagramme ou une ligne fine difficile à pointer. Évite que les cibles chevauchent des commandes sans rapport et décide ce qui doit se produire là où deux régions se rejoignent. Une grande forme invisible peut intercepter les clics d’un voisin aussi facilement qu’une forme visible.

Pour une icône simple exécutant une seule action, un bouton HTML natif fournit souvent la cible nécessaire sans aucun rectangle SVG supplémentaire.

Garde l’activation clavier sur la commande

Le ciblage du pointeur ne fournit ni nom, ni activation clavier, ni sémantique de bouton. Place une icône à action unique dans un bouton HTML nommé et garde l’illustration décorative :

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

L’élément bouton natif fournit le comportement de commande ; le texte visible fournit son nom. Conserve un indicateur de focus visible. Utilise un véritable lien si l’action mène à une autre page.

Dans notre laboratoire, Tab plaçait le focus sur le bouton, puis Entrée et Espace l’activaient chacun. Teste aussi ces touches dans ton interface réelle. Un diagramme comportant plusieurs actions indépendantes nécessite une conception adaptée des interactions clavier ; un seul bouton environnant ne peut pas toutes les représenter.

Définir pointer-events: none n’est pas non plus un état désactivé. Cela ne retire pas de la navigation clavier une commande qui peut autrement recevoir le focus. MDN décrit le focus clavier et la propagation des événements : des descendants peuvent réactiver leur ciblage et leurs événements peuvent encore passer par un gestionnaire parent. Utilise l’attribut natif disabled lorsqu’un bouton doit être désactivé.

Si l’illustration de départ est un PNG

Si la seule source est un PNG ou JPG plat et que ton interface nécessite des formes modifiables indépendamment, le processus d’image en vecteur PerfectVector peut préparer un candidat SVG. Compare-le à l’original, examine les trous et régions importants et décide quelles parties méritent des cibles d’interaction distinctes.

La vectorisation fournit la géométrie. Ton application a encore besoin d’ID significatifs, de gestionnaires d’action, de noms, d’un comportement de focus et de zones cibles délibérées. Un contour visuel vectorisé peut être bien plus détaillé que la région sur laquelle l’utilisateur doit cliquer. Pour une petite icône d’interface, un redessin manuel ou un original vectoriel existant peut faciliter la maintenance. Le guide de préparation des icônes PNG explique quoi examiner avant d’intégrer une illustration reconstruite à un kit d’interface.

Si l’icône est simplement décorative dans une commande, une icône par masque CSS peut convenir à son comportement de couleur ; la commande environnante reste responsable de l’action. Le guide général de vectorisation explique quand reconstruire des tracés est utile au départ.

Vérifie la zone souhaitée avant livraison

Teste à la taille réellement affichée, pas seulement dans un grand aperçu d’éditeur :

1. Clique sur une région remplie, un contour, chaque trou et les angles vides.
2. Examine la cible de l’événement lorsque la mauvaise action se déclenche.
3. Recherche des rectangles transparents ou des éléments superposés interceptant le pointeur.
4. Confirme que les cibles voisines ne se chevauchent pas de façon inattendue.
5. Utilise Tab, Entrée et Espace selon le cas, avec un focus visible.
6. Teste l’interaction tactile sur les appareils pris en charge par ton interface.

Le laboratoire vérifie ces formes particulières dans un navigateur. Il n’établit pas le comportement de tous les navigateurs avec les masques, les découpages, les filtres ou des illustrations importées complexes. Ajoute ces cas à tes tests si ton dessin les utilise.

Si la géométrie modifiable manque, essaie ton image source dans PerfectVector, puis examine ses contours et ses trous. Une fois l’illustration correcte, définis et teste séparément la zone d’interaction.

FAQ

Pourquoi mon SVG répond-il uniquement quand je clique sur son contour ? Avec le comportement du pointeur SVG par défaut, une forme non remplie peut être ciblée uniquement sur son contour peint. Vérifie la valeur du remplissage et l’action prévue. Utilise une cible délibérée ou une commande native environnante si l’espace vide doit activer la même action.

pointer-events="all" rend-il tout le SVG cliquable ? Il cible les régions de remplissage et de contour de l’élément indépendamment de leur couleur ou visibilité. Il ne transforme pas automatiquement toute la zone d’affichage SVG en cible. Ajoute une forme explicite ou utilise une commande environnante si tu as besoin de cette zone.

Un rectangle transparent peut-il recevoir des clics ? Oui. La transparence ne signifie pas que le rectangle n’a ni géométrie ni remplissage. Un rectangle transparent avec une valeur pointer-events adaptée peut servir de cible délibérée, mais peut aussi intercepter des clics accidentellement.

Vectoriser une image crée-t-il des boutons accessibles ? Non. La vectorisation peut produire une géométrie modifiable à partir d’une illustration matricielle. Noms, comportement clavier, gestionnaires d’action, focus et régions d’interaction doivent être implémentés et testés dans l’interface.

Sources

1. W3C — scripts et interactivité SVG 2 — Définit le ciblage SVG et la géométrie utilisée par les valeurs pointer-events.
2. W3C — peinture SVG 2 — Définit comment les règles de remplissage déterminent l’intérieur et les trous d’un tracé.
3. MDN — pointer-events — Explique ciblage, propagation, héritage et limites du focus clavier.
4. MDN — élément button — Décrit le comportement natif du bouton, son nom et son état désactivé.