English

<a>

Créer un lien cliquable dans un SVG

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • svg

<a> SVG — Le lien dans un graphique

La balise <a> en SVG fonctionne comme son homologue HTML : elle crée un lien cliquable. Mais en SVG, elle utilise l'attribut href (namespace SVG) et enveloppe des formes ou du texte SVG, pas du contenu HTML.

Quand l'utiliser

Tu veux rendre une partie d'un graphique cliquable : un noeud de diagramme, une zone d'une carte, un label de graphique qui mène vers une page de détail.

Ce que tu gagnes

Accessibilité : contrairement au <a> HTML, le <a> SVG n'est pas focusable par défaut dans tous les navigateurs. Ajouté tabindex="0" et un texte accessible (via <title> enfant ou aria-label) pour garantir la navigation au clavier.

Exemple de code

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <a href="/dashboard" tabindex="0">
    <title>Go to dashboard</title>
    <rect x="10" y="10" width="180" height="40" rx="8" fill="teal" />
    <text x="100" y="36" text-anchor="middle" fill="white" font-size="1rem">
      Dashboard
    </text>
  </a>
</svg>

Pour aller plus loin