<g>

La balise <g> est utilisée pour regrouper plusieurs éléments dans un graphique SVG.

Elle permet de structurer et manipuler facilement un ensemble d'éléments SVG en les traitant comme un seul groupe. Cela inclut les transformations (comme la rotation ou le déplacement) ou l'application d'attributs partagés (comme une couleur).

En regroupant des éléments, vous pouvez simplifier la gestion et réduire les répétitions dans votre code. 😊

Structure et syntaxe de la balise <g>

Structure

La balise <g> s'utilise toujours à l'intérieur d'une balise <svg>.

Voici un exemple de syntaxe simple :

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(50,50)" fill="blue">
        <rect width="50" height="50" />
        <circle cx="75" cy="75" r="25" />
    </g>
</svg>

Dans cet exemple :

• Le groupe <g> contient un rectangle et un cercle ;
• Le groupe est déplacé de 50 pixels sur les axes x et y grâce à transform="translate(50,50)" ;
• La couleur bleue est appliquée à tous les éléments du groupe grâce à l'attribut fill.

Voici le résultat de cet exemple :

Notez que l'utilisation de la balise <g> ne change pas l'apparence visuelle des éléments regroupés, mais simplifie leur gestion.

Exemple avancé

Voici un exemple regroupant plusieurs cercles avec des transformations appliquées au groupe :

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45, 150, 100)" fill="none" stroke="black" stroke-width="2">
        <circle cx="150" cy="100" r="40" />
        <circle cx="200" cy="100" r="40" />
        <circle cx="100" cy="100" r="40" />
    </g>
</svg>

Dans cet exemple :

• Le groupe <g> est pivoté de 45° autour du point (150, 100) grâce à transform="rotate(45, 150, 100)".
• Les cercles partagent les mêmes styles de bordure (stroke, stroke-width, et fill).

Voici le résultat :

Attributs

Voici les attributs principaux pour la balise <g> :

• transform : applique des transformations (comme translate, rotate, ou scale) au groupe ;
• fill : modifie la couleur de remplissage pour tous les éléments enfants (modifiable par élément) ;
• stroke : précise la couleur des bordures pour tous les enfants (modifiable par élément) ;
• stroke-width : donne les indiciations sur les largeurs des bordures pour tous les enfants.

Bonnes pratiques

Voici quelques conseils pour bien utiliser cette balise :

• Regroupez les éléments liés ensemble pour simplifier la gestion et la réutilisation ;
• Utilisez des transformations (comme translate ou rotate) directement sur le groupe au lieu de chaque élément individuellement ;
• Appliquez des styles communs sur le groupe avec des attributs globaux comme fill ou stroke.

Pour une hiérarchie complexe, combinez la balise <g> avec d'autres balises comme <defs> pour créer des groupes réutilisables.

Compatibilité des navigateurs

La balise <g> est compatible avec tous les navigateurs modernes :