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.
@namespace svgns url(http://www.w3.org/2000/svg); html,body,svg { height:100% }
<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"> <circle> </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 cuerpoPING
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 type:no-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
Categorias | Elemento contenedor |
---|---|
Contenido permitido | Cualquier 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
La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, haz un check out de https://github.com/mdn/browser-compat-data y envíenos un pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
a | Chrome Soporte completo 1 | Edge Soporte completo Si | Firefox Soporte completo 1.5 | IE Soporte completo 9 | Opera Soporte completo 9 | Safari Soporte completo 3.1 | WebView Android Soporte completo 3 | Chrome Android Soporte completo Si | Firefox Android Soporte completo 4 | Opera Android Soporte completo Si | Safari iOS Soporte completo 3.1 | Samsung Internet Android Soporte completo Si |
download | Chrome ? | Edge ? | Firefox Soporte completo Si | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android Soporte completo Si | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
href | Chrome Soporte completo Si | Edge Soporte completo Si | Firefox Soporte completo 51 | IE Soporte completo Si | Opera Soporte completo Si | Safari Soporte completo 9 | WebView Android Soporte completo Si | Chrome Android Soporte completo Si | Firefox Android Soporte completo 51 | Opera Android ? | Safari iOS Soporte completo 9 | Samsung Internet Android Soporte completo Si |
hreflang | Chrome Sin soporte No | Edge Soporte completo Si | Firefox Soporte completo 61 | IE Sin soporte No | Opera Sin soporte No | Safari Sin soporte No | WebView Android Sin soporte No | Chrome Android Sin soporte No | Firefox Android Soporte completo 61 | Opera Android Sin soporte No | Safari iOS Sin soporte No | Samsung Internet Android Sin soporte No |
ping | Chrome Sin soporte No | Edge Soporte completo Si | Firefox Soporte completo 61 | IE Sin soporte No | Opera Sin soporte No | Safari Sin soporte No | WebView Android Sin soporte No | Chrome Android Sin soporte No | Firefox Android Soporte completo 61 | Opera Android Sin soporte No | Safari iOS Sin soporte No | Samsung Internet Android Sin soporte No |
referrerPolicy | Chrome Soporte completo 51 | Edge Sin soporte No | Firefox Soporte completo 52 | IE Sin soporte No | Opera Soporte completo 38 | Safari Soporte completo 11.1 | WebView Android Soporte completo 51 | Chrome Android Soporte completo 51 | Firefox Android Soporte completo 52 | Opera Android Soporte completo 41 | Safari iOS Sin soporte No | Samsung Internet Android Soporte completo 7.2 |
rel | Chrome Sin soporte No | Edge Soporte completo Si | Firefox Soporte completo 61 | IE Sin soporte No | Opera Sin soporte No | Safari Sin soporte No | WebView Android Sin soporte No | Chrome Android Sin soporte No | Firefox Android Soporte completo 61 | Opera Android Sin soporte No | Safari iOS Sin soporte No | Samsung Internet Android Sin soporte No |
target | Chrome Soporte completo 1 | Edge Soporte completo Si | Firefox Soporte completo 1.5 | IE Soporte completo 9 | Opera Soporte completo 9 | Safari Soporte completo 3.1 | WebView Android Soporte completo 3 | Chrome Android Soporte completo Si | Firefox Android Soporte completo 4 | Opera Android Soporte completo Si | Safari iOS Soporte completo 3.1 | Samsung Internet Android Soporte completo Si |
type | Chrome Sin soporte No | Edge Soporte completo Si | Firefox Soporte completo 61 | IE Sin soporte No | Opera Sin soporte No | Safari Sin soporte No | WebView Android Sin soporte No | Chrome Android Sin soporte No | Firefox Android Soporte completo 61 | Opera Android Sin soporte No | Safari iOS Sin soporte No | Samsung Internet Android Sin soporte No |
xlink:actuate | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
xlink:href | Chrome Soporte completo 1 | Edge Soporte completo Si | Firefox Soporte completo 1.5 | IE Soporte completo 9 | Opera Soporte completo 9 | Safari Soporte completo 3.1 | WebView Android Soporte completo 3 | Chrome Android Soporte completo Si | Firefox Android Soporte completo 4 | Opera Android Soporte completo Si | Safari iOS Soporte completo 3.1 | Samsung Internet Android Soporte completo Si |
xlink:show | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
xlink:title | 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.