files/es/web/svg/element/use/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
146
147
148
149
150
151
152
153
154

---
title: <use>
slug: Web/SVG/Element/use
tags:
  - Elementos
  - Gráficos SVG
  - Referencia
  - SVG
translation_of: Web/SVG/Element/use
---
<div>{{SVGRef}}</div>

<p>El elemento <code>use</code> toma los nodos que están dentro del documento SVG y duplica el contenido donde éste esté siendo utilizado. El efecto es el mismo, como si éstos nodos hubiesen sido profundamente clonados en un elemento DOM no expuesto, y luego pegados donde se encuentra el elemento <code>use</code>, al igual que los <a href="/en-US/docs/Web/HTML/Element/template">elementos plantilla</a> son clonados en HTML5. Desde que los elementos clonados no sean expuestos como DOM, su cuidado debe tomarse en cuenta durante el uso de <a href="/en/CSS" title="en/CSS">CSS</a> para estilizar un elemento <code>use</code> y sus descendientes ocultos. Los atributos CSS no ofrecen la garantía de heredarse en los elementos DOM clonados y escondidos, a no ser que lo realice utilizando <a href="/en/CSS/inheritance" title="en/CSS/inheritance">herencia CSS</a>.</p>

<p>Por razones de seguridad, algunos navegadores podrían aplicar una política del mismo origen sobre los elementos <code>use</code> y podrían negarse a cargar una URI de origen cruzado dentro del atributo <code>xlink:href</code>.</p>

<h2 id="Contexto_de_uso">Contexto de uso</h2>

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

<h2 id="Ejemplo">Ejemplo</h2>

<pre class="brush: xml" id="Attributes">&lt;svg width="100%" height="100%" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>"&gt;
  &lt;style&gt;
    .classA { fill:red }
  &lt;/style&gt;
  &lt;defs&gt;
    &lt;g id="Port"&gt;
      &lt;circle style="fill:inherit" r="10"/&gt;
    &lt;/g&gt;
  &lt;/defs&gt;

  &lt;text y="15"&gt;black&lt;/text&gt;
  &lt;use x="50" y="10" xlink:href="#Port" /&gt;
  &lt;text y="35"&gt;red&lt;/text&gt;
  &lt;use x="50" y="30" xlink:href="#Port" class="classA"/&gt;
  &lt;text y="55"&gt;blue&lt;/text&gt;
  &lt;use x="50" y="50" xlink:href="#Port" style="fill:blue"/&gt;
 &lt;/svg&gt;
</pre>

<p> </p>

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

<h3 id="Atributos_Globales">Atributos Globales</h3>

<ul>
 <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de procesamiento condicional</a> »</li>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos núcleo</a> »</li>
 <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de presentación</a> »</li>
 <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos Xlink</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>

<h3 id="Atributos_específicos">Atributos específicos</h3>

<ul>
 <li>{{ SVGAttr("x") }}</li>
 <li>{{ SVGAttr("y") }}</li>
 <li>{{ SVGAttr("width") }}</li>
 <li>{{ SVGAttr("height") }}</li>
 <li>{{ SVGAttr("xlink:href") }}</li>
</ul>

<h2 id="Interfaz_DOM">Interfaz DOM</h2>

<p>Este elemento implementa la interface <code><a href="/en/DOM/SVGUseElement" title="en/DOM/SVGUseElement">SVGUseElement</a></code>.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Carga desde una URL externa</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{CompatNo()}}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Carga desde dato: URI</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("10.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Carga desde una URL externa</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
  <tr>
   <td>Carga desde dato: URI</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>