files/es/web/svg/element/a/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

---
title: <a>
slug: Web/SVG/Element/a
translation_of: Web/SVG/Element/a
---
<div>{{SVGRef}}</div>

<p>El elemento SVG &lt;a&gt; 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.</p>

<p>En SVG, el elemento &lt;a&gt; 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.</p>

<div id="Exemple">
<div class="hidden">
<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
html,body,svg { height:100% }</pre>
</div>

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

  &lt;!-- Un vínculo alrededor de una forma --&gt;
  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
    &lt;text x="50" y="90" text-anchor="middle"&gt;
      &amp;lt;circle&amp;gt;
    &lt;/text&gt;
  &lt;/a&gt;
&lt;/svg&gt;</pre>

<pre class="brush: css">/* 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;
}</pre>

<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
</div>

<div class="warning">
<p>Puesto que este elemento comparte su nombre de etiqueta con el <a href="/en-US/docs/Web/HTML/Element/a">elemento <code>&lt;a&gt;</code>de HTML</a>, la selección de "<code>a</code>" con CSS o <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> puede aplicarse al tipo incorrecto de elemento. Pruebe <a href="/en-US/docs/Web/CSS/@namespace">la regla <code>@namespace</code></a> para distinguir entre los dos.</p>
</div>

<h2 id="Atributos">Atributos</h2>

<dl>
 <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt>
 <dd>Este atributo indica a los navegadores que descarguen un {{Glossary ( "URL ")}} en lugar de desplazarse a él, por lo que se le pedirá al usuario que lo guarde como un archivo local.<br>
 <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
 <dt>{{SVGAttr("href")}}</dt>
 <dd>Este atributo contiene el {{Glossary ( "URL ")}} o el fragmento de URL al que apunta el hipervínculo.<br>
 <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
 <dt>{{htmlattrxref("hreflang", "a")}}</dt>
 <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br>
 <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
 <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt>
 <dd>Este atributo contiene una lista de direcciones URL separadas por espacios a las que, cuando se sigue el hipervínculo, las solicitudes <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> con el cuerpo <code>PING</code> 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 <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br>
 <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-URLs&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
 <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt>
 <dd>Este atributo indica qué <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> se enviará al obtener {{Glossary("URL")}}.<br>
 <small><em>Value type</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd>
 <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt>
 <dd>Este atributo especifica la relación del objeto de destino con el vínculado.<br>
 <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types">&lt;list-of-Link-Types&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
 <dt>{{SVGAttr("target")}}</dt>
 <dd>Este atributo especifica dónde mostrar el {{Glossary("URL")}}.<br>
 <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong>&lt;name&gt;</strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
 <dt>{{htmlattrxref("type", "a")}}</dt>
 <dd>Este atributo especifica el tipo de medio en forma de un {{Glossary ( "tipo MIME ")}} para la dirección URL vinculada.<br>
 <small><em>Value type</em>: <strong>&lt;string&gt;</strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
 <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
 <dd>Este atributo contiene la dirección URL o el fragmento de URL al que apunta el hipervínculo.<br>
 <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL">&lt;URL&gt;</a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
</dl>

<h3 id="Atributos_globales">Atributos globales</h3>

<dl>
 <dt><a href="/docs/Web/SVG/Attribute/Core">Atributos principales</a> </dt>
 <dd><small>Especialmente: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd>
 <dt><a href="/docs/Web/SVG/Attribute/Styling">Atributos de estilo</a></dt>
 <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
 <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Atributos de procesamiento condicional</a></dt>
 <dd><small>Especialmente: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
 <dt>Atributos de evento</dt>
 <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Atributos de eventos globales</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">atributos de eventos de elementos de documento</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">atributos de eventos gráficos</a></small></dd>
 <dt><a href="/docs/Web/SVG/Attribute/Presentation">Atributos de presentación</a></dt>
 <dd><small>Especialmente: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd>
 <dt>Atributos XLink</dt>
 <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd>
 <dt>Atributos ARIA</dt>
 <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
</dl>

<h2 id="Notas_de_uso">Notas de uso</h2>

<p>{{svginfo}}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentatio</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td>Añadido el atributo <code>referrerpolicy</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>Se sustituye el atributo {{SVGAttr("xlink:href")}} por {{SVGAttr("href")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

<div class="hidden">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 <a href="https://ssl.microsofttranslator.com/bv.aspx?from=&amp;to=es&amp;a=https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div>

<p>{{Compat("svg.elements.a")}}</p>