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

Posicionamento SVG

Respostas: