files/es/web/svg/element/g/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

---
title: g
slug: Web/SVG/Element/g
tags:
  - Contenedor
  - Contenedor SVG
  - Elemento
  - Referencia
  - SVG
translation_of: Web/SVG/Element/g
---
<div>{{SVGRef}}</div>

<div>El elemento <code>g</code> es un contenedor usado para agrupar objetos. Las transformaciones aplicadas al elemento <code>g</code> son realizadas sobre todos los elementos hijos del mismo. Los atributos aplicados son heredados por los elementos hijos. Además, puede ser usado para definir objetos complejos que pueden luego ser referenciados con el elemento {{SVGElement("use")}}.</div>

<div> </div>

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

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

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

<pre class="brush: html" style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: -webkit-auto; text-indent: 0px; text-transform: none;">&lt;svg width="100%" height="100%" viewBox="0 0 95 50"
     xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;g stroke="green" fill="white" stroke-width="5"&gt;
    &lt;circle cx="25" cy="25" r="15" /&gt;
    &lt;circle cx="40" cy="25" r="15" /&gt;
    &lt;circle cx="55" cy="25" r="15" /&gt;
    &lt;circle cx="70" cy="25" r="15" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample("Ejemplo",220,130)}}</p>

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

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

<ul>
 <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Core attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Presentation attributes</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>

<p><em>No hay atributos específicos</em></p>

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

<p>Este elemento implementa la interfaz <code><a href="/en-US/docs/DOM/SVGGElement" title="DOM/SVGGElement">SVGGElement</a></code>.</p>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th scope="col">Característica</th>
   <th scope="col">Chrome</th>
   <th scope="col">Firefox (Gecko)</th>
   <th scope="col">Internet Explorer</th>
   <th scope="col">Opera</th>
   <th scope="col">Safari</th>
  </tr>
  <tr>
   <td>Soporte Básico</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop('1.8')}}</td>
   <td>{{CompatIE('9.0')}}</td>
   <td>{{CompatOpera('8.0')}}</td>
   <td>{{CompatSafari('3.0.4')}}</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte Básico</td>
   <td>{{CompatAndroid('3.0')}}</td>
   <td>{{CompatGeckoMobile('1.8')}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatSafari('3.0.4')}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>La tabla está basada en <a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">these sources</a>.</p>