D3.js
Author

(Rocha, 2019, pp. 36-37)

Contenedores de grupo

Puedes agrupar varias formas en SVG con el elemento <g>. Es similar a un <div> en HTML. Este es un elemento invisible y se ubica en el centro de las coordenadas. Las propiedades CSS aplicadas a un grupo afectan a todos los objetos que lo contienen. También puedes aplicar transformaciones matriciales a los grupos para mover, rotar y escalar todo su contenido. Un contenedor de grupo también puede contener otros contenedores de grupo.

En el siguiente SVG, los círculos y las elipses están en un grupo, y los rectángulos en otro. El color de los elementos, según cada grupo, se declara en CSS, y se trasladan, escalan y rotan juntos:

<style>
    svg { border: solid 1px lightgray; }
    #bars { fill: red; }
    #round { opacity: .7; fill: blue;}
</style>
<body>
<svg width="600" height="300">
    <g id="bars" transform="translate (0,100) rotate(90, 100, 150)">
        <rect x="100" y="150" height="20" width="150"></rect>
        <rect x="100" y="180" height="20" width="100"></rect>
        <rect x="100" y="210" height="20" width="200"></rect>
    </g>
    <g id="round" transform="translate(200,100) scale(.3) ">
        <circle cx="280" cy="220" r="50"></circle>
        <ellipse cx="150" cy="90" rx="80" ry="50"></ellipse>
</g>
</svg>
</body>

La siguiente captura de pantalla muestra los grupos antes de aplicar cualquier transformación o estilos a sus grupos (a la izquierda) y después de aplicar las transformaciones y estilos del código anterior (a la derecha):

Los estilos aplicados directamente a elementos individuales de los grupos tienen prioridad y anularán cualquier estilo declarado a nivel de grupo. Las posiciones de los elementos dentro del grupo siempre son relativas al sistema de coordenadas introducido por cualquier transformación aplicada al grupo.