a

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> (en-US), <filter>, <font> (en-US), <font-face> (en-US), <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script> (en-US), <style>, <switch>, <text>, <view> (en-US)

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 (en-US) par href (en-US)
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de '<a>' dans cette spécification.
Recommendation Définition initiale

Compatibilité des navigateurs

BCD tables only load in the browser