L'élément SVG <a> crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL.

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

Exemple

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

  <!-- Un lien autour d'un texte -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>
/* Comme SVG ne fournit pas de style visuel par défaut pour les liens,
   il est en recommendé d'en ajouter manuellement */

@namespace svgns url(http://www.w3.org/2000/svg);

svgns|a {
  cursor: pointer;
}

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

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

Étant donné que cet élément partage son nom de balise avec l'élément HTML <a>, la sélection de "a" avec CSS ou querySelector peut s'appliquer au mauvais type d'élément. La règle @namespace permet de faire la distinction entre les deux.

Attributs

 

Attributs globaux

Attributs spécifiques

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
Eléments de dégradés
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Interface DOM

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

Spécifications

Spécification Statut Commentaire
Referrer Policy
La définition de 'referrer attribute' dans cette spécification.
Candidat au statut de recommandation Ajoute l'attribut referrerpolicy.
Scalable Vector Graphics (SVG) 2
La définition de '<a>' dans cette spécification.
Candidat au statut de recommandation Remplace l'attribut xlink:href par href
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<a>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3.1Samsung Internet Android Support complet Oui
downloadChrome ? Edge ? Firefox Support complet OuiIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet OuiOpera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome Support complet OuiEdge Support complet OuiFirefox Support complet 51IE Support complet OuiOpera Support complet OuiSafari Aucun support NonWebView Android ? Chrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 51Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet Oui
hreflangChrome Aucun support NonEdge Support complet OuiFirefox Support complet 61IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 61Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
pingChrome Aucun support NonEdge Support complet OuiFirefox Support complet 61IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 61Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
referrerPolicyChrome Support complet 51Edge Aucun support NonFirefox Support complet 52IE Aucun support NonOpera Support complet 38Safari Support complet 11.1WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Aucun support NonFirefox Android Support complet 52Opera Android Support complet 38Safari iOS Aucun support NonSamsung Internet Android Support complet 7.2
relChrome Aucun support NonEdge Support complet OuiFirefox Support complet 61IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 61Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
targetChrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3.1Samsung Internet Android Support complet Oui
typeChrome Aucun support NonEdge Support complet OuiFirefox Support complet 61IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Support complet OuiFirefox Android Support complet 61Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
xlink:actuate
Obsolète
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Obsolète
Chrome Support complet 1Edge Support complet OuiFirefox Support complet 1.5IE Support complet 9Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 3Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 3.1Samsung Internet Android Support complet Oui
xlink:show
Obsolète
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:title
Obsolète
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt, sblondon, Sebastianz, SphinxKnight, teoli, Barbrousse
Dernière mise à jour par : a-mt,