<a>

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Voir la compatibilité complète
En savoir plus

L'élément SVG <a> crée un lien hypertexte vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL. Il est très similaire à l'élément HTML <a>.

L'élément <a> de SVG est un conteneur, ce qui signifie que vous pouvez créer un lien autour du texte (comme en HTML) mais aussi autour de n'importe quelle forme.

Contexte d'utilisation

Catégories	Élément conteneur
Contenu autorisé	Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs Éléments de formes Éléments structurels Éléments de dégradés `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Attributs

download: Indique aux navigateurs de télécharger une URL au lieu de naviguer vers elle, de sorte que l'utilisateur·ice est invité·e à l'enregistrer en tant que fichier local. Type de valeur : <string> ; Valeur par défaut : aucune ; Peut être animé : non
href: Une URL ou un fragment d'URL vers lequel le lien hypertexte pointe. Type de valeur : <URL> ; Valeur par défaut : aucune ; Peut être animé : oui
hreflang: La langue humaine de l'URL ou du fragment d'URL vers lequel le lien hypertexte pointe. Type de valeur : <string> ; Valeur par défaut : aucune ; Peut être animé : non
interestfor: Définit l'élément <a> comme un déclencheur d'intérêt. Sa valeur est un id d'un élément cible qui est affecté d'une manière ou d'une autre (normalement affiché ou masqué) lorsque l'intérêt est montré ou perdu sur l'élément déclencheur (par exemple, en survolant/cessant de survoler ou en sélectionnant/perdant la sélection). Voir Utiliser les déclencheurs d'intérêt pour plus de détails et d'exemples. Type de valeur : <string> ; Valeur par défaut : aucune ; Peut être animé : non
ping: Une liste d'URL séparées par des espaces auxquelles le navigateur envoie des requêtes POST avec le corps PING lorsque le lien hypertexte est suivi (en arrière-plan). Cet attribut sert généralement au suivi. Pour une fonctionnalité mieux prise en charge qui répond aux mêmes cas d'utilisation, voir Navigator.sendBeacon(). Type de valeur : <list-of-URLs> ; Valeur par défaut : aucune ; Peut être animé : non
referrerpolicy: Quel référent envoyer lors de la récupération de l'URL. Type de valeur : no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url ; Valeur par défaut : aucune ; Peut être animé : non
rel: La relation entre l'objet cible et l'objet lien. Type de valeur : <list-of-Link-Types> ; Valeur par défaut : aucune ; Peut être animé : non
target: Emplacement où afficher l'URL liée. Type de valeur : _self | _parent | _top | _blank | <XML-Name> ; Valeur par défaut : _self ; Peut être animé : oui
type: Un type MIME pour l'URL liée. Type de valeur : <string> ; Valeur par défaut : aucune ; Peut être animé : non
xlink:href: L'URL ou le fragment d'URL vers lequel pointe le lien hypertexte. Peut être requis pour assurer la compatibilité ascendante avec les anciens navigateurs. Type de valeur : <URL> ; Valeur par défaut : aucune ; Peut être animé : oui

Interface DOM

Cet élément implémente l'interface SVGAElement.

Exemples

@namespace svg url("http://www.w3.org/2000/svg");
html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Un lien autour d'une forme -->
  <a href="/docs/Web/SVG/Reference/Element/circle">
    <circle cx="50" cy="40" r="35" />
  </a>

  <!-- Un lien autour d'un texte -->
  <a href="/docs/Web/SVG/Reference/Element/text">
    <text x="50" y="90" text-anchor="middle">&lt;circle&gt;</text>
  </a>
</svg>

css

/* Comme SVG ne fournit pas de style visuel par défaut pour les liens,
   il est en recommandé d'en ajouter manuellement */

@namespace svg url("http://www.w3.org/2000/svg");
/* Nécessaire pour sélectionner uniquement les éléments SVG <a>, et pas
   aussi ceux de HTML. Voir l'avertissement ci-dessous */

svg|a:link,
svg|a:visited {
  cursor: pointer;
}

svg|a text,
text svg|a {
  fill: blue; /* Même pour du texte, SVG utilise fill plutôt que color */
  text-decoration: underline;
}

svg|a:hover,
svg|a:active {
  outline: dotted 1px blue;
}

Attention : Comme cet élément partage son nom de balise avec l'élément HTML <a>, sélectionner a avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. Essayez la règle CSS @namespace pour distinguer les deux.

Spécifications

Spécification
Scalable Vector Graphics (SVG) 2 # Links

Compatibilité des navigateurs

Voir aussi

L'attribut xlink:title
L'élément HTML <a>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 23 sept. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu