Pozycjonowanie SVG

203

Gram w SVG i mam kilka problemów z pozycjonowaniem. Mam serię kształtów zawartych w gznaczniku grupy. Miałem nadzieję, że użyję go jak kontenera, więc mogę ustawić jego pozycję x, a wtedy wszystkie elementy w tej grupie również się poruszą. Ale to nie wydaje się możliwe.

Jak większość ludzi zajmuje się pozycjonowaniem grupy elementów, które chcesz poruszać w tandemie?
Czy jest jakaś koncepcja względnego pozycjonowania? np. względem swojego rodzica

svg position grouping

— ChrisInCambo
źródło

276

Wszystko w elemencie g jest ustawione względem bieżącej macierzy transformacji.

Aby przenieść zawartość, po prostu umieść transformację w elemencie g:

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

Linki: przykład ze specyfikacji SVG 1.1

— Aaron Digulla
źródło

73

Istnieje krótsza alternatywa dla poprzedniej odpowiedzi. Elementy SVG można również pogrupować, zagnieżdżając elementy 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>

Dwa prostokąty są identyczne (oprócz kolorów), ale nadrzędne elementy svg mają różne wartości x.

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

— Kağan Kayal
źródło

33

Racja, element SVG może być również elementem grupującym. Chciałem zauważyć, że element SVG domyślnie implementuje obcinanie (przynajmniej w tym momencie w Chrome). Oznacza to, że wszelkie przelewy nie będą widoczne. W przeciwieństwie do elementu „g”. Wystarczy ustawić przepełnienie = „widoczne” i wrócisz do pracy, jeśli to cię gryzie.

— bladnman

1

Jest to przydatne, jeśli chcesz przetłumaczyć grupę elementów z wartościami procentowymi: stackoverflow.com/a/17103928/470117

— mem

14

Czy są jakieś wady używania svg zamiast g?

— grabantot

34

Jak wspomniano w drugim komentarzu, transformatrybut gelementu jest tym, czego chcesz. Użyj, transform="translate(x,y)"aby poruszać się gwokół i rzeczy w ruchu gbędą się poruszać w stosunku do g.

— codedread
źródło

22

Istnieją dwa sposoby grupowania wielu kształtów SVG i pozycjonowania grupy:

Pierwszy używał <g>z transformatrybutem, jak napisał Aaron. Ale nie można po prostu użyć xatrybutu <g>elementu.

Innym sposobem jest użycie <svg>elementu zagnieżdżonego .

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

W ten sposób svg # group1 jest zagnieżdżony w #parent i x=10jest względny w stosunku do svg nadrzędnego. Nie można jednak użyć transformatrybutu <svg>elementu, co jest zupełnie sprzeczne z <g>elementem.

— fengshuo
źródło

13

dlaczego <g> nie ma atrybutu ax i y, podczas gdy wszystkie inne tagi svg go mają? oznacza to, że pozycja jest zawsze bezwzględna w <svg> ... bez pozycji względnej,

— ponownie się

2

takie są komitety open source.

— Muhammad Umer,

Zgadzam się ... wydaje się, że to zły wybór. Po prostu zwiększenie X-transformacji grupy wymaga napisania potencjalnie skomplikowanego ciągu i przechowywania wszystkich zmiennych gdzie indziej

— Rzęsa

9

@ user1952009: istnieje szansa - tylko szansa - że tak naprawdę nie rozumiesz wyborów projektowych, które trafiły do SVG.

— Paul D. Waite,

3

<g> służy do grupowania. Nie reprezentuje żadnego kształtu, więc nie ma sensu, aby miał lokalizację lub rozmiar. Jednak sensowne jest posiadanie atrybutu transformacji , który można odczytać jak „zastosuj tę transformację do całej grupy”.

— AlQafir,