Élément <g> SVG

L'élément <g> de SVG est utilisé pour regrouper les formes SVG. Après le regroupement, vous pouvez transformer l'ensemble des formes comme si vous les transformiez individuellement. Par rapport à l'élément <svg> imbriqué, qui ne peut pas être cible de transformation seul, c'est un avantage. Vous pouvez également définir les styles des éléments de regroupement et les réutiliser comme des éléments individuels.

L'élément g est utilisé comme conteneur pour combiner des objets. Les transformations ajoutées à l'élément g sont appliquées à tous ses éléments enfants. Les attributs ajoutés à l'élément g sont hérités par tous ses éléments enfants. De plus, l'élément g peut également être utilisé pour définir des objets complexes, qui peuvent ensuite être référencés par l'élément <use>.

Exemple de l'élément <g> de SVG

C'est un simple SVG <g>Exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<g>
　　　　　　<line　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　style="stroke:　#006600;"/>
　　　　　　<rect　x="10"　y="20"　height="50"　width="75"
　　　　　　　　　　style="stroke:　#006600;　fill:　#006600"/>
　　　　　　<text　x="10"　y="90"　style="stroke:　#660000;　fill:　#660000">
　　　　　　　　w30000">w/codebox.com Tutoriel de base<
　　　　g>/text>
g>/<

Après exécution, l'effet visuel de l'image :

Cet exemple montre des éléments <g> combinés3un certain nombre de formes. Comme celles qui sont énumérées ici, il n'y a pas d'avantage spécial dans ce groupe. Mais veuillez noter ce qui se passe lorsque nous demandons la conversion de l'élément <g>. Voici le code :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<g　transform="rotate(45　50　50)">
　　　　　　<line　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　style="stroke:　#006600;"/>
　　　　　　<rect　x="10"　y="20"　height="50"　width="75"
　　　　　　　　　　style="stroke:　#006600;　fill:　#006600"/>
　　　　　　<text　x="10"　y="90"　style="stroke:　#660000;　fill:　#660000">
　　　　　　　　w30000">w/codebox.com Tutoriel de base<
　　　　g>/text>
g>/<

Après exécution, l'effet visuel de l'image :

Attention<g>de toutes les formes de l'élément autour du point50 " , puis tournez autour du point50 ,45degrés.

les styles des éléments g sont hérités

<g>les styles CSS des éléments sont hérités de leurs éléments enfants. Voici un exemple :

<svg　width="320"　height="150"><g style="couleur-trace: #0000ff; trace-largeur:　4px; remplissage: #ff0000">
　　　　<rect　　　　x="10"　y="10"　width="100"　height="50"　/>
　　　　<circle　cx="150"　cy="35"　r="25"　/>
　　　　<circle　cx="250"　cy="35"　r="25"
　　　　　　　　　　　style="stroke:　#009900;　fill:　#00ff00;/>
g>/text>
g>/<

dans cet exemple,<g>élément avec trois enfants. Le<g> élément a unstyleles deux premiers éléments n'ont passtyleattribut. Par conséquent, les styles définis dans l'élément<g>par ces éléments enfants. Le troisième élément enfant a unstyleles attributs de couleur de tracé et de remplissage, mais il hérite de ce<g>de l'élémentstroke-widthattributs.

Après exécution, l'effet visuel de l'image :

Inconvénient : Les éléments G n'ont pas d'attributs X et Y

La capacité de transformer toutes les formes à l'intérieur de l'élément <g> est une avantage par rapport à regrouper les formes à l'intérieur d'un élément <svg> imbriqué. L'élément <svg> ne peut pas se transformer lui-même. Vous devez imbriquer l'élément <svg> à l'intérieur de l'élément <g> pour transformer ses formes imbriquées.
Cependant, par rapport à l'élément <svg>, l'élément <g> a un inconvénient. Vous ne pouvez pas simplement déplacer l'élément <g> qui contient toutes les formes imbriquées en changeant les attributs x et y de l'élément <g>. L'élément <g> n'a pas d'attributs x et y. Pour déplacer le contenu de l'élément <g>, vous ne pouvez utiliser que la propriété transform avec la fonction "translate", par exemple : transform ="translate(x,y)".
Si vous avez besoin d'utiliser les attributs x et y pour déplacer toutes les formes à l'intérieur de l'élément <g>, vous devez imbriquer l'élément <g> à l'intérieur de l'élément <svg>. L'élément <svg> a des attributs x et y. Voici un exemple :

<svg　width="320"　height="150">
　　　　<g　transform="rotate(45　50　50)">
　　　　　　　　<line　x1="10"　y1="10"　x2="85"　y2="10"
　　　　　　　　　　　　style="stroke:　#006600;"/>
　　　　　　　　<rect　x="10"　y="20"　height="50"　width="75"
　　　　　　　　　　　　style="stroke:　#006600;　fill:　#006600"/>
　　　　　　　　<text　x="10"　y="90"　style="stroke:　#660000;　fill:　#660000">
　　　　　　　　　　w30000">w/codebox.com Tutoriel de base<
　　　　g>/text>
g>/<

dans cet exemple,<g>sont imbriquées dans　<svg>élément intérieur. Notez que tous les formes à l'intérieur de l'élément<svg>est défini sur100. Cela signifie que d'abord, l'attribut x du forme interne<g>faire la transformation, puis déplacer le long de l'axe x100, car<svg>position x = 100. Après exécution, l'effet visuel de l'image :

Vous pouvez également basculer entre les imbriquements, en plaçant<svg>élément imbriqué dans<g>élément intérieur, comme indiqué ci-dessous :

<svg　width="320"　height="150">
<g　transform="rotate(45　50　50)">
<svg　x="100">
　　　　<line　x1="10"　y1="10"　x2="85"　y2="10"　style="stroke:　#006600;"></line>
　　　　<rect　x="10"　y="20"　height="50"　width="75"　style="stroke:　#006600;　fill:　#006600"></rect>
　　　　<text　x="10"　y="90"　style="stroke:　#660000;　fill:　#660000">w30000">w/codebox.com Tutoriel de base<
g>/<
g>/text>
g>/<

›10Ensuite, la forme se déplace d'abord le long de l'axe x100 , car la position de l'élément <svg> est x="50 " , puis tournez autour du point50 ,450 rotation

codebox.com Tutoriel de base De plus, veuillez noter que bien que ces deux images semblent similaires, elles sont différentes. La différence réside dans l'ordre de l'exécution du mouvement et de la rotation. Si vous regardez attentivement, vous pouvez également voir cela sur l'image. La forme affichée n'est pas placée uniformément. De plus, veuillez noter que même si la première image est affichée en tant que points dans l'image en direction de x, c'est aussi le cas. Cela se produit parce que le forme a été d'abord tournée, puis le texte s'est étiré au-delà de l'image dans la partie tournée.