<a>

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

El elemento SVG <a> crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

En SVG, el elemento <a> es un contenedor, es decir, puede crear un enlace alrededor del texto, como en HTML, pero también puede crear un enlace alrededor de cualquier forma.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Un vínculo alrededor de una forma -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
    <circle cx="50" cy="40" r="35"/>
  </a>

  <!-- Un vínculo alrededor de una forma -->
  <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>
/* Como SVG no proporciona un estilo visual predeterminado para los enlaces,
   se considera una práctica recomendada agregar algunos */

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

svgns|a {
  cursor: pointer;
}

svgns|a text {
  fill: blue; /* Incluso para el texto, SVG usa fill para el color */
  text-decoration: underline;
}

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

Puesto que este elemento comparte su nombre de etiqueta con el elemento <a>de HTML, la selección de "a" con CSS o querySelector puede aplicarse al tipo incorrecto de elemento. Pruebe la regla @namespace para distinguir entre los dos.

Atributos

download
Este atributo indica a los navegadores que descarguen un URL en lugar de desplazarse a él, por lo que se le pedirá al usuario que lo guarde como un archivo local.
Value type: <string> ; Default value: none; Animatable: no
href
Este atributo contiene el URL o el fragmento de URL al que apunta el hipervínculo.
Value type: <URL> ; Default value: none; Animatable: yes
hreflang
This attribute contains the URL or URL fragment that the hyperlink points to.
Value type: <string> ; Default value: none; Animatable: yes
ping
Este atributo contiene una lista de direcciones URL separadas por espacios a las que, cuando se sigue el hipervínculo, las solicitudes POST con el cuerpo PING serán enviadas por el navegador (en segundo plano). Normalmente se utiliza para el seguimiento. Para obtener una característica más ampliamente admitida que aborde los mismos casos de uso, consulte Navigator.sendBeacon().
Value type: <list-of-URLs> ; Default value: none; Animatable: no
referrerpolicy
Este atributo indica qué referrer se enviará al obtener URL.
Value typeno-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no
rel
Este atributo especifica la relación del objeto de destino con el vínculado.
Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
target
Este atributo especifica dónde mostrar el URL.
Value type_self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
type
Este atributo especifica el tipo de medio en forma de un tipo MIME para la dirección URL vinculada.
Value type: <string> ; Default value: none; Animatable: yes
xlink:href Desaprobado SVG 2
Este atributo contiene la dirección URL o el fragmento de URL al que apunta el hipervínculo.
Value type: <URL> ; Default value: none; Animatable: yes

Atributos globales

Atributos principales 
Especialmente: id, lang, tabindex
Atributos de estilo
class, style
Atributos de procesamiento condicional
Especialmente: requiredExtensions, systemLanguage
Atributos de evento
Atributos de eventos globales, atributos de eventos de elementos de documento, atributos de eventos gráficos
Atributos de presentación
Especialmente: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
Atributos XLink
Most notably: xlink:title
Atributos ARIA
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

Notas de uso

CategoriasElemento contenedor
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos
Shape elements
Elementos estructurales
Gradient elements
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Especificaciones

Especificación Estado Comentatio
Referrer Policy
La definición de 'referrer attribute' en esta especificación.
Candidate Recommendation Añadido el atributo referrerpolicy.
Scalable Vector Graphics (SVG) 2
La definición de '<a>' en esta especificación.
Candidate Recommendation Se sustituye el atributo xlink:href por href
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La definición de '<a>' en esta especificación.
Recommendation Definición inicial

Compatibilidad del navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
aChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.1WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3.1Samsung Internet Android Soporte completo Si
downloadChrome ? Edge ? Firefox Soporte completo SiIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Soporte completo SiOpera Android ? Safari iOS ? Samsung Internet Android ?
hrefChrome Soporte completo SiEdge Soporte completo SiFirefox Soporte completo 51IE Soporte completo SiOpera Soporte completo SiSafari Soporte completo 9WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 51Opera Android ? Safari iOS Soporte completo 9Samsung Internet Android Soporte completo Si
hreflangChrome Sin soporte NoEdge Soporte completo SiFirefox Soporte completo 61IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 61Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
pingChrome Sin soporte NoEdge Soporte completo SiFirefox Soporte completo 61IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 61Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
referrerPolicyChrome Soporte completo 51Edge Sin soporte NoFirefox Soporte completo 52IE Sin soporte NoOpera Soporte completo 38Safari Soporte completo 11.1WebView Android Soporte completo 51Chrome Android Soporte completo 51Firefox Android Soporte completo 52Opera Android Soporte completo 41Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 7.2
relChrome Sin soporte NoEdge Soporte completo SiFirefox Soporte completo 61IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 61Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
targetChrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.1WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3.1Samsung Internet Android Soporte completo Si
typeChrome Sin soporte NoEdge Soporte completo SiFirefox Soporte completo 61IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 61Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
xlink:actuate
Deprecado
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:href
Deprecado
Chrome Soporte completo 1Edge Soporte completo SiFirefox Soporte completo 1.5IE Soporte completo 9Opera Soporte completo 9Safari Soporte completo 3.1WebView Android Soporte completo 3Chrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo SiSafari iOS Soporte completo 3.1Samsung Internet Android Soporte completo Si
xlink:show
Deprecado
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
xlink:title
Deprecado
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Deprecado. No debe ser usado en nuevos sitios web.
Deprecado. No debe ser usado en nuevos sitios web.