Punkt odniesienia transformacji SVG: obracaj grafikę wokół jej środka

Aby za pomocą CSS obrócić grafikę SVG wokół jej własnego środka, umieść powiązane ścieżki w jednej grupie i zastosuj do niej transform-box: fill-box oraz transform-origin: center. Następnie ustaw obrót na tej grupie. Te dwie właściwości odpowiadają na różne pytania: który prostokąt stanowi odniesienie i gdzie w jego obrębie znajduje się punkt obrotu.

Jeśli zaimportowana ikona podczas obrotu przemieszcza się po obszarze rysunku, sprawdź to odniesienie, zanim zmienisz współrzędne jej ścieżek. Jeśli jej części obracają się osobno, sprawdź, do których elementów zastosowano transformację. Istniejąca grafika wektorowa zwykle wymaga poprawienia grupowania lub transformacji; odrysowywanie przydaje się tylko wtedy, gdy najpierw potrzebujesz edytowalnych ścieżek ze źródła rastrowego.

Dlaczego samo center nadal może przemieszczać grafikę

W przypadku zwykłego elementu potomnego SVG, takiego jak ścieżka lub grupa, domyślny punkt odniesienia transformacji to 0 0. Główne elementy SVG mają inną wartość domyślną. Przy domyślnym ustawieniu transform-box: view-box ustawienie punktu odniesienia na center odnosi się do referencyjnego obszaru widoku SVG, a nie do granic samej grafiki. Dokumentacja MDN SVG transform-origin reference wyjaśnia zarówno wartości domyślne, jak i te wyjątki.

Pusta przestrzeń wokół logo ma więc znaczenie. Mały symbol umieszczony bliżej jednego z rogów dużego obszaru rysunku ma inny środek niż ten obszar. transform-box: fill-box zmienia odniesienie na prostokąt ograniczający obiektu reprezentowanego przez element. Nie przycina SVG ani nie usuwa pustej przestrzeni. Dokumentacja transform-box reference definiuje dostępne prostokąty odniesienia, w tym stroke-box, gdy odniesienie ma uwzględniać obrys.

Obracaj dwie ścieżki jako jeden znak

Zapisz ten kompletny przykład jako rotation.svg i otwórz go w przeglądarce. Wykorzystuje on autorski kwadrat i oddzielny trójkątny akcent, oba umieszczone z dala od początku układu współrzędnych. CSS znajduje się wewnątrz SVG, dzięki czemu samodzielny plik zawiera własną regułę obrotu.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Przed obrotem cała grafika rozciąga się od x = 80 do 220 oraz od y = 50 do 130. Jej prostokąt ograniczający ma 140 jednostek szerokości i 80 jednostek wysokości, więc jego środek to (150, 90). Kwadrat i akcent zachowują wzajemne położenie podczas obrotu grupy.

Wyrenderowaliśmy w przeglądarce cztery stany tych samych ścieżek przy ustalonym kącie, odczytaliśmy ich geometrię i osobno ponownie otworzyliśmy kompletny plik SVG podany powyżej. W porównaniu użyto szerszych obszarów widoku, aby zostawić miejsce na wynik obrotu wokół domyślnego punktu odniesienia. Są to ręcznie utworzone ścieżki demonstracyjne, a nie wynik konwersji w PerfectVector ani test wszystkich przeglądarek i edytorów.

Wersja z domyślnym punktem odniesienia obraca znak wokół (0, 0). Obie wersje z obrotem grupy wokół jej środka dają ten sam wynik. W ostatnim panelu kwadrat obraca się wokół (120, 90), a trójkątny akcent wokół (195, 90). Każda część pozostaje blisko swojego początkowego położenia, ale znak nie obraca się już jako jeden obiekt.

W swoim pliku wybierz tylko te części, które mają poruszać się razem. Prostokąty tła, znaczniki pasowania lub odległe, przypadkowe ścieżki mogą powiększyć granice grupy. Procedura edycji SVG opisuje sprawdzanie i porządkowanie pliku przed dodaniem zachowania.

Użyj jawnych współrzędnych, gdy punkt obrotu wynika z projektu

Atrybut transformacji SVG pozwala bezpośrednio określić kąt i punkt obrotu. W przykładzie zastąp <g class="artwork"> przez <g transform="rotate(35 150 90)">. Pozostaw w nim obie ścieżki. Usunięcie klasy sprawia również, że transformacja CSS przestaje nadpisywać atrybut.

Postać atrybutu rotate(angle cx cy) używa kąta w stopniach, po którym podaje się punkt obrotu w bieżącym układzie współrzędnych użytkownika. CSS rotate(35deg) ma inną składnię i pobiera punkt odniesienia z osobnej właściwości. Jeśli transformacja CSS i atrybut transformacji SVG dotyczą tego samego elementu, CSS ma pierwszeństwo. Zobacz dokumentację MDN transform attribute reference.

Jawne współrzędne przydają się w przypadku zawiasu, wskazówki lub celowo przesuniętego punktu obrotu logo. Utrzymuj je w tym samym lokalnym układzie współrzędnych co obracana grupa. Współrzędna zmierzona na ekranie nie jest automatycznie współrzędną, którą możesz wkleić do zagnieżdżonej grupy SVG.

Jeśli istniejąca grupa ma już transformację określającą jej położenie, zachowaj ją i umieść obrót na nowej grupie wewnętrznej zawierającej grafikę. Następnie przetestuj wyeksportowany plik. Zastąpienie istniejącej transformacji może usunąć przesunięcie lub skalowanie, które ustawiało znak na miejscu. Jeśli zmiana skali również przesuwa znak, przykład kolejności transformacji SVG pokazuje, jak łączą się przesunięcie i skalowanie.

Odczytaj granice przed obliczeniem środka

Dla prostej grupy, takiej jak w tym przykładzie, środek oblicza się następująco:

cx = x + width / 2
cy = y + height / 2

W naszym pomiarze w przeglądarce wywołanie getBBox() na grupie zwróciło x: 80, y: 50, width: 140 i height: 80. Obrót samej grupy nie zmienił tych lokalnych wartości prostokąta. Dokumentacja getBBox documentation wyjaśnia różnicę między tymi wartościami w układzie współrzędnych użytkownika a prostokątem zwracanym przez getBoundingClientRect(), określonym względem obszaru widoku przeglądarki.

W przypadku konturów zaznaczenia lub dopasowanego viewBox procedura pracy z prostokątem ograniczającym SVG pokazuje, jak przeliczać wartości między tymi układami współrzędnych i sprawdzać marginesy obrysu.

Zmierz element, który zamierzasz obrócić. Transformacje elementów potomnych mogą wpływać na granice zawierającej je grupy: nasza grupa z osobno obróconymi elementami potomnymi miała inne granice niż pierwotna para. Element otaczający, zagnieżdżone skalowanie lub przypadkowy kształt wymagają sprawdzenia, zanim ponownie użyjesz prostych wartości podanych powyżej.

Środek prostokąta nie zawsze jest środkiem wizualnym

Kwadrat w tym przykładzie zajmuje znacznie większą powierzchnię niż jego trójkątny akcent. Środek ich wspólnego prostokąta nadal leży w połowie odległości między skrajną lewą a skrajną prawą krawędzią. To reguła geometryczna; nie ocenia, czy projekt wygląda na zrównoważony podczas obrotu.

Zacznij od środka prostokąta, obejrzyj znak pod kilkoma kątami i przejdź do jawnego punktu obrotu, jeśli wymaga tego projekt. Wskazówkę zegara zwykle trzeba obracać wokół jej punktu mocowania. Logo z akcentem poza środkiem może wymagać środka wybranego przez projektanta. Oddziel tę decyzję od poprawiania przypadkowego punktu odniesienia opartego na obszarze widoku.

Obrót wymaga również miejsca. Eksport z granicami ściśle dopasowanymi do nieobróconej grafiki może uciąć narożniki po jej obrocie. Zostaw wystarczająco dużo miejsca w obszarze widoku i sprawdź przycinanie przez elementy nadrzędne. Jeśli cały plik importuje się w niewłaściwej skali, skorzystaj z diagnostyki rozmiaru SVG, zanim zmienisz poszczególne części.

Ta procedura obraca istniejący kształt bez przepisywania jego konturu. Jeśli Twoim celem jest przekształcenie jednego konturu w inny, poradnik morfingu SVG opisuje osobne zagadnienie dopasowywania geometrii ścieżek.

Przygotuj źródło przed ustawieniem punktu obrotu

Jeśli Twoja ikona istnieje tylko jako PNG lub JPG i potrzebujesz edytować jej oddzielne kształty, PerfectVector może pomóc przygotować wstępną wersję SVG. Przekonwertuj grafikę na grafikę wektorową, sprawdź jej sylwetkę i oddzielne detale, a następnie zgrupuj części, które mają obracać się razem. Przed pomiarem grupy sprawdź, czy nie zawiera niechcianych kształtów tła.

Obraz rastrowy może obracać się w całości bez odrysowywania. Użyj wektoryzacji, gdy zadanie wymaga edytowalnej geometrii. Jeśli masz już użyteczny wektorowy plik źródłowy, zachowaj go; zmiana punktu odniesienia transformacji nie naprawia uszkodzonego konturu, a odrysowywanie kopii rastrowej dodaje niepotrzebny etap rekonstrukcji.

Przed przekazaniem pliku ponownie otwórz dokładnie ten plik SVG w docelowym środowisku. Potwierdź, że zamierzone części obracają się razem, punkt obrotu pozostaje w wybranym miejscu, a obrócona grafika ma wystarczająco dużo przestrzeni. Zachowaj niezmieniony plik źródłowy do późniejszej edycji. Artykuły na blogu o pracy z SVG opisują powiązane czynności przygotowawcze i kontrole eksportu.

Najczęściej zadawane pytania

Dlaczego transform-origin: center obraca moje SVG wokół obszaru rysunku? W przypadku elementu potomnego SVG używającego domyślnego odniesienia view-box wartość center odnosi się do referencyjnego obszaru widoku SVG. Ustaw transform-box na fill-box dla elementu, który zamierzasz obrócić, jeśli chcesz zamiast tego użyć prostokąta ograniczającego jego obiekt.

Czy obracać grupę, czy każdą ścieżkę? Obracaj grupę, gdy części mają poruszać się jako jeden znak. Zastosowanie fill-box i center do każdej ścieżki nadaje każdej części własny punkt obrotu, co zmienia ich wspólny układ.

Czy środek fill-box sprawi, że asymetryczne logo będzie wyglądało na zrównoważone? To ustawienie wybiera środek prostokąta ograniczającego obiektu. Równowaga wizualna może wymagać innego punktu obrotu, dlatego obejrzyj logo pod kilkoma kątami i w razie potrzeby wybierz jawne współrzędne.

Źródła

1. MDN — SVG transform-origin — Definiuje domyślne punkty odniesienia SVG, wyjątki dla elementów głównych i zależność od prostokąta odniesienia.
2. MDN — transform-box — Definiuje prostokąty odniesienia obiektu, obrysu i obszaru widoku.
3. MDN — SVG transform — Dokumentuje jawne współrzędne obrotu, transformacje grup i pierwszeństwo CSS.
4. MDN — getBBox — Wyjaśnia lokalne pomiary geometrii i ich różnicę względem prostokątów określonych względem obszaru widoku.

Potrzebujesz edytowalnych kształtów ze źródła rastrowego? Przygotuj SVG za pomocą PerfectVector, sprawdź odtworzone części, a następnie zgrupuj je i sprawdź wybrany punkt obrotu w ostatecznym wyeksportowanym pliku.