El elemento SVG <g> es un contenedor que se utiliza para agrupar otros elementos SVG.
Las transformaciones aplicadas al elemento <g> también se realizan en sus elementos secundarios, y sus atributos son heredados por sus elementos secundarios.
Sintaxis:
<g attributes="" >
<elements>
</g>
Atributos:
- Atributos centrales: estos atributos son atributos centrales como id, etc.
- Atributos de estilo: estos atributos definen el estilo, la experiencia, la clase y el estilo.
- Atributos condicionales: Estos atributos están basados en condiciones, exp systemLanguage.
- Atributos de presentación: atributos utilizados para dar efectos de presentación, color de exposición, regla de clip, etc.
Ejemplo 1: Hacer círculos verdes consecutivos heredando atributos del elemento <g>.
html
<!DOCTYPE html> <html> <body> <svg width="1200" height="1200"> <g fill="white" stroke="green" stroke-width="10"> <circle cx="40" cy="40" r="25" /> <circle cx="80" cy="40" r="25" /> <circle cx="120" cy="40" r="25" /> <circle cx="160" cy="40" r="25" /> </g> </svg> </body> </html>
Producción:
Ejemplo 2: Hacer rectángulos con las mismas propiedades heredadas.
html
<!DOCTYPE html> <html> <body> <svg width="1200" height="1200"> <defs> <linearGradient id="gfgStr"> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="blue" /> </linearGradient> </defs> <g fill="white" stroke="url(#gfgStr)" stroke-width="15"> <rect width="400" height="200" /> <rect width="200" height="200" /> <rect width="200" height="100" /> </g> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Chrome 1 y superior
- Borde 12 y superior
- Firefox 1.5 y superior
- Safari 3.1 y superior
- Internet Explorer 9 y superior
- Ópera 8 y superior