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.

  1. Jak większość ludzi zajmuje się pozycjonowaniem grupy elementów, które chcesz poruszać w tandemie?
  2. Czy jest jakaś koncepcja względnego pozycjonowania? np. względem swojego rodzica
svg position grouping ChrisInCambo
źródło

Odpowiedzi:

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,