g

El elemento g es un contenedor usado para agrupar objetos. Las transformaciones aplicadas al elemento g 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 <use>.

Contexto de uso

Categorias Elemento contenedor, Elemento estructural

Contenido permitido Cualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos
Elementos de forma
Elementos estructurales
Elementos de degradado
<a>, <clipPath> (en-US), <color-profile>, <cursor> (en-US), <filter> (en-US), <font> (en-US), <font-face> (en-US), <foreignObject> (en-US), <image> (en-US), <marker> (en-US), <mask> (en-US), <pattern> (en-US), <script>, <style>, <switch> (en-US), <text>, <view>

Categorias	Elemento contenedor, Elemento estructural
Contenido permitido	Cualquier número de los siguientes elementos, en cualquier orden: Elementos de animación Elementos descriptivos Elementos de forma Elementos estructurales Elementos de degradado `<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>` (en-US), `<image>` (en-US), `<marker>` (en-US), `<mask>` (en-US), `<pattern>` (en-US), `<script>`, `<style>`, `<switch>` (en-US), `<text>`, `<view>`

Ejemplo

html

<svg
  width="100%"
  height="100%"
  viewBox="0 0 95 50"
  xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>