Posizionamento SVG

203

Sto giocando con SVG e ho qualche problema con il posizionamento. Ho una serie di forme contenute nel gtag del gruppo. Speravo di usarlo come un contenitore, in modo da poter impostare la sua posizione x e quindi anche tutti gli elementi di quel gruppo si sarebbero mossi. Ma questo non sembra essere possibile.

In che modo la maggior parte delle persone posiziona un gruppo di elementi che si desidera spostare in tandem?
Esiste un concetto di posizionamento relativo? ad esempio rispetto al suo genitore

svg position grouping

— ChrisInCambo
fonte

276

Tutto nell'elemento g è posizionato rispetto alla matrice di trasformazione corrente.

Per spostare il contenuto, basta inserire la trasformazione nell'elemento g:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Collegamenti: esempio dalle specifiche SVG 1.1

— Aaron Digulla
fonte

73

C'è un'alternativa più breve alla risposta precedente. Gli elementi SVG possono anche essere raggruppati annidando gli elementi svg:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

I due rettangoli sono identici (a parte i colori), ma gli elementi svg parent hanno valori x diversi.

Vedi http://tutorials.jenkov.com/svg/svg-element.html .

— Kağan Kayal
fonte

33

Bene, anche l'elemento SVG può essere un elemento di raggruppamento. Volevo sottolineare che l'elemento SVG implementa il clipping di default (almeno al momento in Chrome). Ciò significa che qualsiasi overflow non sarà visibile. A differenza dell'elemento "g". Basta impostare overflow = "visible" e sei di nuovo in affari, se questo ti morde.

— Bladnman,

1

E 'utile se si desidera tradurre un gruppo di elementi con percentuali: stackoverflow.com/a/17103928/470117

— MEMS

14

Ci sono degli svantaggi nell'usare svg invece di g?

— Grabantot,

34

Come menzionato nell'altro commento, l' transformattributo gsull'elemento è quello che vuoi. Usare transform="translate(x,y)"per muovere il ggiro e le cose all'interno della gvolontà si muoveranno in relazione al g.

— codedread
fonte

22

Esistono due modi per raggruppare più forme SVG e posizionare il gruppo:

Il primo da usare <g>con l' transformattributo come scrisse Aaron. Ma non puoi semplicemente usare un xattributo <g>sull'elemento.

L'altro modo è usare l' <svg>elemento nidificato .

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

In questo modo, # group1 svg è nidificato in #parent e x=10è relativo al svg parent. Tuttavia, non è possibile utilizzare l' transformattributo su <svg>element, che è piuttosto il contrario di <g>element.

— Fengshuo
fonte

13

perché <g> non ha attributo ax e y mentre tutti gli altri tag svg ce l'hanno? significa che la posizione è sempre assoluta in <svg> ... nessuna posizione relativa,

— riprende il

2

i comitati open source sono così.

— Muhammad Umer,

Sono d'accordo ... sembra una cattiva scelta nel design. Il semplice aumento della trasformazione X di un gruppo richiede la scrittura di una stringa potenzialmente complicata e la memorizzazione di tutte le variabili altrove

— Eyelash,

9

@ user1952009: c'è una possibilità - solo un'opportunità - di non capire effettivamente le scelte progettuali che sono state fatte in SVG.

— Paul D. Waite,

3

<g> è per il raggruppamento. Non rappresenta alcuna forma da sola, quindi non avrebbe senso avere una posizione o una dimensione. Ha senso avere un attributo di trasformazione , che puoi leggere come "applica questa trasformazione a tutto il gruppo".

— AlQafir,

0

So che questo è vecchio ma né un <svg>tag di gruppo né un <g>problema risolto che stavo affrontando. Avevo bisogno di regolare la posizione y di un tag che aveva anche un'animazione su di esso.

La soluzione era usare insieme sia il tag che:

<svg y="1190" x="235">
   <g class="light-1">
     <path />
   </g>
</svg>

— Codice amichevole
fonte