Elemento <g> SVG

O elemento <g> do SVG é usado para agrupar formas do SVG. Após o agrupamento, você pode transformar toda a forma como se transformasse uma única forma. Em comparação com o elemento <svg> aninhado, que não pode ser um alvo de transformação isolado, isso é uma vantagem. Você também pode definir o estilo do elemento de grupo e reutilizá-lo como um único elemento.

O elemento g é usado como um contêiner para combinar objetos. As transformações adicionadas ao elemento g são aplicadas a todos seus elementos filhos. Os atributos adicionados ao elemento g são herdados por todos seus elementos filhos. Além disso, o elemento g também pode ser usado para definir objetos complexos, que podem ser referenciados posteriormente por meio do elemento <use>.

exemplo de elemento <g> do SVG

Este é um simples SVG <g>exemplo:

<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"
　　　　　　　　　　estilo="cor_de_borda: #006600;"/>
　　　　　　<rect x="10" y="20" altura="50" largura="75"
　　　　　　　　　　estilo="cor_de_borda: #006600; preencher: #006600"/>
　　　　　　<text x="10" y="90" estilo="cor_de_borda: #660000; preencher: #660000">
　　　　　　　　oldtoolbag.com　Manual Básico</text>
　　　　</g>
</svg>

Após a execução, o efeito da imagem é:

Este exemplo mostra formas combinadas em um elemento <g>.3um número de formas. Como listado aqui, não há benefício especial neste grupo. Mas note o que acontece quando pedimos para transformar o elemento <g>. Este é o código:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<g transform="rotação(45　50　50)">
　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　estilo="cor_de_borda: #006600;"/>
　　　　　　<rect x="10" y="20" altura="50" largura="75"
　　　　　　　　　　estilo="cor_de_borda: #006600; preencher: #006600"/>
　　　　　　<text x="10" y="90" estilo="cor_de_borda: #660000; preencher: #660000">
　　　　　　　　oldtoolbag.com　Manual Básico</text>
　　　　</g>
</svg>

Após a execução, o efeito da imagem é:

atenção<g>formas dentro do elemento como giram em torno de um ponto50,50 Rotação45graus.

estilo do elemento g é herdado por seus elementos filhos

<g>estilo CSS de um elemento é herdado por seus elementos filhos. Este é um exemplo:

<svg largura="320" altura="150"><g estilo="cor: #0000ff; traço:-largura:　4px; preencher: #ff0000">
　　　　<retângulo x="10" y="10" largura="100" altura="50"　/>
　　　　<círculo cx="150" cy="35" r="25"　/>
　　　　<círculo cx="250" cy="35" r="25"
　　　　　　　　　　　estilo="cor_de_borda: #009900; preencher: #00ff00;/>
</g>
</svg>

Este exemplo define um<g>tem três subelementos. O<g> elemento tem umestiloos dois primeiros subelementos não têmestilopropriedade. Portanto, o estilo definido no elemento<g>estão sendo herdados por esses subelementos. O terceiro subelemento tem umaestilodefinir a propriedade da cor do traço e do preenchimento, mas ainda herda essa<g>do elementocor_de_borda-largurapropriedade.

Após a execução, o efeito da imagem é:

Desvantagem: O elemento G não possui atributos X e Y

A capacidade de transformar todos os formatos dentro do elemento <g> é uma vantagem em comparação com agrupar os formatos dentro do elemento <svg> aninhado. O elemento <svg> não pode se transformar sozinho. Você deve aninhar o elemento <svg> dentro do elemento <g> para transformar seus formatos aninhados.
No entanto, em comparação com o elemento <svg>, o elemento <g> tem uma desvantagem. Não é possível mover o elemento <g> que inclui todos os formatos aninhados apenas alterando os atributos x e y do elemento <g>. O elemento <g> não possui os atributos x e y. Para mover o conteúdo do elemento <g>, pode-se usar a propriedade transform com a função "translate", por exemplo: transform ="translate(x,y)".
Se precisar usar os atributos x e y para mover todos os formatos dentro do elemento <g>, é necessário aninhar o elemento <g> dentro do elemento <svg>. O elemento <svg> possui os atributos x e y. Este é um exemplo:

<svg largura="320" altura="150">
　　　　<g transform="rotação(45　50　50)">
　　　　　　　　<line x1="10" y1="10" x2="85" y2="10"
　　　　　　　　　　　　estilo="cor_de_borda: #006600;"/>
　　　　　　　　<rect x="10" y="20" altura="50" largura="75"
　　　　　　　　　　　　estilo="cor_de_borda: #006600; preencher: #006600"/>
　　　　　　　　<text x="10" y="90" estilo="cor_de_borda: #660000; preencher: #660000">
　　　　　　　　　　oldtoolbag.com　Manual Básico</text>
　　　　</g>
</svg>

Neste exemplo,<g>os quais o elemento interno está aninhado　<svg>elemento interno. Note que todos os formatos<svg>do atributo x interno100. Isso significa que primeiro o formato<g>realizar a transformação, e mover ao longo do eixo x100, porque<svg>posição x = 100. Após a execução, o efeito da imagem é:

Você também pode alternar aninhamento, para<svg>elementos aninhados dentro<g>elementos internos, conforme mostrado a seguir:

<svg largura="320" altura="150">
<g transform="rotação(45　50　50)">
<svg x="100">
　　　　<line x1="10" y1="10" x2="85" y2="10" estilo="cor_de_borda: #006600;"></linha>
　　　　<rect x="10" y="20" altura="50" largura="75" estilo="cor_de_borda: #006600; preencher: #006600"></retângulo>
　　　　<text x="10" y="90" estilo="cor_de_borda: #660000; preencher: #660000">oldtoolbag.com　Manual Básico</text>
</svg>
</g>
</svg>

Em seguida, a forma se move primeiro ao longo do eixo x100, porque a posição do elemento <svg> é x="100" e, em seguida, girar em ponto50,50 Rotação45Graus. O resultado é:

Essas duas imagens podem parecer semelhantes, mas são diferentes. A diferença está na ordem de execução do movimento e rotação. Se você olhar com atenção, também pode ver isso na imagem. A forma exibida está desalinhada. Além disso, note que, mesmo que a primeira imagem seja exibida como pontos no eixo x da imagem, isso também é verdade. Isso acontece porque primeiro girou a forma, e então o texto saiu da imagem na parte girada. Ainda falta parte do texto quando se move para a esquerda.