a
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
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="/docs/Web/SVG/Element/circle">
<circle cx="50" cy="40" r="35" />
</a>
<!-- Un lien autour d'un texte -->
<a href="/docs/Web/SVG/Element/circle">
<text x="50" y="90" text-anchor="middle"><circle></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;
}
Attention : É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
download
Expérimentalhref
hreflang
ping
Expérimentalreferrerpolicy
Expérimentalrel
Expérimentaltarget
type
xlink:href
Obsolète
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> , <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
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Links |
Compatibilité des navigateurs
BCD tables only load in the browser