files/pt-br/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

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

<p>O elemento <code>g</code> é um recipiente utilizado para agrupar objetos. Transformações aplicadas no elemento <code>g</code> são repassadas para todos os seus elementos filhos. Atributos também são herdados por elementos filhos. Além disso, pode ser utilizado para definir objetos complexos que poderão ser referenciados mais tarde pelo elemento {{SVGElement("use")}}.</p>

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

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

<h2 id="Exemplo">Exemplo</h2>

<pre class="brush: html" style="">&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("Exemplo",220,130)}}</p>

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

<h3 id="Atributos_globais">Atributos globais</h3>

<ul>
 <li><a href="/pt-BR/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li>
 <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Atributos principais</a> »</li>
 <li><a href="/pt-BR/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li>
 <li><a href="/pt-BR/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Atributos de apresentação</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>There is no specific attributes</em></p>

<h2 id="Interface_DOM">Interface DOM</h2>

<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGGElement" title="DOM/SVGGElement">SVGGElement</a></code>.</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>


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