Posicionamento SVG

203

Estou brincando com o SVG e tendo alguns problemas com o posicionamento. Eu tenho uma série de formas que estão contidas na gtag de grupo. Eu esperava usá-lo como um contêiner, para poder definir sua posição x e todos os elementos desse grupo também se moveriam. Mas isso não parece ser possível.

Como a maioria das pessoas posiciona um grupo de elementos que você deseja mover em conjunto?
Existe algum conceito de posicionamento relativo? por exemplo, em relação ao seu pai

svg position grouping

— ChrisInCambo
fonte

276

Tudo no elemento g é posicionado em relação à matriz de transformação atual.

Para mover o conteúdo, basta colocar a transformação no elemento g:

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

Links: Exemplo da especificação SVG 1.1

— Aaron Digulla
fonte

73

Existe uma alternativa mais curta à resposta anterior. Os elementos SVG também podem ser agrupados aninhando elementos 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>

Os dois retângulos são idênticos (exceto as cores), mas os elementos svg pai têm valores x diferentes.

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

— Kağan Kayal
fonte

33

Certo, o elemento SVG também pode ser um elemento de agrupamento. Queria ressaltar que o elemento SVG implementa o recorte por padrão (pelo menos no momento no Chrome). Isso significa que qualquer excesso não será visível. Ao contrário do elemento "g". Basta definir overflow = "visible" e você estará de volta aos negócios, se isso te morder.

— bladnman

1

É útil se você quiser traduzir um grupo de elementos com percentagens: stackoverflow.com/a/17103928/470117

— MEMS

14

Existem desvantagens em usar svg em vez de g?

— grabantot

34

Conforme mencionado no outro comentário, o transformatributo no gelemento é o que você deseja. Use transform="translate(x,y)"para mover ao gredor e as coisas dentro da gvontade se moverão em relação ao g.

— codedread
fonte

22

Existem duas maneiras de agrupar várias formas SVG e posicionar o grupo:

O primeiro a usar <g>com transformatributo como Aaron escreveu. Mas você não pode simplesmente usar um xatributo no <g>elemento.

A outra maneira é usar o <svg>elemento aninhado .

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

Dessa maneira, o # group1 svg está aninhado em #parent e o x=10é relativo ao svg pai. No entanto, você não pode usar o transformatributo no <svg>elemento, o que é bastante contrário ao <g>elemento.

— fengshuo
fonte

13

por que <g> não possui o atributo ax e y, enquanto todas as outras tags svg o possuem? isso significa que a posição é sempre absoluta em <svg> ... nenhuma posição relativa

— #

2

comitês de código aberto são assim.

— Muhammad Umer

Eu concordo ... parece uma má escolha de design. Simplesmente incrementar um grupo X-transformação requer escrever uma seqüência potencialmente complicado e armazenar todas as variáveis em outro lugar

— pestana

9

@ user1952009: há uma chance - apenas uma chance - de você realmente não entender as opções de design que entraram no SVG.

— Paul D. Waite

3

<g> é para agrupar. Ele não representa nenhuma forma por si só, portanto não faria sentido ter um local ou tamanho. No entanto, faz sentido ter um atributo de transformação , que você pode ler como "aplicar essa transformação a todo o grupo".

— AlQafir