Elemento <g> SVG

L'elemento SVG <g> è usato per raggruppare forme SVG. Dopo la raggruppamento, è possibile trasformare l'intera forma come se fosse una singola forma. A differenza degli elementi <svg> annidati che non possono diventare obiettivi di trasformazione indipendenti, questo è un vantaggio. È anche possibile impostare lo stile dell'elemento di raggruppamento e usarli ripetutamente come singoli elementi.

L'elemento g è usato come contenitore per raggruppare oggetti. Le trasformazioni aggiunte all'elemento g vengono applicate a tutti i suoi sottoelementi. Gli attributi aggiunti all'elemento g vengono ereditati da tutti i suoi sottoelementi. Inoltre, l'elemento g può anche essere usato per definire oggetti complessi, che possono essere poi riferiti tramite l'elemento <use>.

Esempio di elemento SVG <g>

Questo è un semplice SVG <g>Esempio:

<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">
　　　　　　　　oldtoolbag.com guida di base</text>
　　　　</g>
</svg>

Effetto visivo dell'immagine dopo l'esecuzione:

Questo esempio mostra tre forme raggruppate insieme con l'elemento <g>. Come elencato qui, non ci sono particolari vantaggi in questa raggruppamento. Tuttavia, nota cosa accade quando richiediamo la trasformazione dell'elemento <g>. Questo è il codice:

<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">
　　　　　　　　oldtoolbag.com guida di base</text>
　　　　</g>
</svg>

Effetto visivo dell'immagine dopo l'esecuzione:

Attenzione<g>Come le forme all'interno dell'elemento si muovono di 45 gradi attorno al punto 50,50.

L'attributo di stile dell'elemento g viene ereditato dai suoi sottoelementi

<g>L'attributo CSS dell'elemento viene ereditato dai suoi sottoelementi. Ecco un esempio:

<svg width="320" height="150"><g style="stroke: #0000ff; stroke-width: 4px; fill: #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>
</svg>

Questo esempio definisce un<g>L'elemento con tre sottoelementi. Il<g> L'elemento ha unstyleI primi due sottoelementi non hannostyleAttributi. Pertanto, gli stili definiti nell'elemento<g>Questi sottoelementi ereditano. Il terzo sottoelemento ha unstyleImpostare attributi di colore della traccia e riempimento, ma eredita ancora il<g>elementostroke-widthAttributi.

Effetto visivo dell'immagine dopo l'esecuzione:

Svantaggio: l'elemento G non ha attributi X e Y

Confrontato con la capacità di raggruppare le forme all'interno degli elementi <svg>嵌套, la capacità di trasformare tutte le forme all'interno dell'elemento <g> è un vantaggio. Gli elementi <svg> non possono trasformarsi autonomamente. È necessario nesting gli elementi <svg> all'interno dell'elemento <g> per trasformare le forme annidate.
Tuttavia, rispetto all'elemento <svg>, l'elemento <g> ha un difetto. Non è possibile muovere l'elemento <g> che include tutte le forme annidate solo cambiando gli attributi x e y dell'elemento <g>. L'elemento <g> non ha gli attributi x e y. Per muovere il contenuto dell'elemento <g>, è necessario utilizzare l'attributo transform con la funzione "translate", ad esempio: transform ="translate(x,y)".
Se si desidera utilizzare gli attributi x e y per muovere tutte le forme all'interno dell'elemento <g>, è necessario incorniciare l'elemento <g> all'interno dell'elemento <svg>. L'elemento <svg> ha gli attributi x e y. Ecco un esempio:

<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">
　　　　　　　　　　oldtoolbag.com guida di base</text>
　　　　</g>
</svg>

in questo esempio,<g>tutte le forme all'interno dell'elemento sono contenute in　<svg>all'interno dell'elemento. Nota che tutte le forme<svg>l'attributo x è impostato a 100. Questo significa che prima di tutte le forme<g>eseguire la trasformazione, quindi muovere lungo l'asse x di 100, perché<svg>posizione x = 100. L'effetto dell'immagine dopo l'esecuzione:

Puoi anche cambiare l'ordine di sovrapposizione, spostando<svg>l'elemento è contenuto in<g>all'interno dell'elemento, come illustrato di seguito:

<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">oldtoolbag.com guida di base</text>
</svg>
</g>
</svg>

Poi, la forma si muove lungo l'asse x di 100, perché la posizione dell'elemento <svg> è x="100", poi ruota di 45 gradi attorno al punto 50,50. Il risultato è il seguente:

Queste due immagini possono sembrare simili, ma sono diverse. La differenza sta nell'ordine di esecuzione del movimento e della rotazione. Se si osserva attentamente, si può anche vedere che la posizione delle forme visualizzate non è uniforme. Inoltre, si prega di notare che, anche se la prima immagine viene visualizzata come punti nel senso della direzione x dell'immagine, è così. Questo accade perché il形状 è stato girato prima e poi il testo è stato spinto oltre l'immagine nella parte girata. Dopo di che, quando si muove a sinistra, manca ancora una parte di testo.