Flagi łuku SVG: rysuj właściwą krzywą poleceniami A

Dwie flagi w poleceniu SVG A wybierają, który łuk łączy jego punkt początkowy i końcowy. Ustaw large-arc-flag na 0, aby wybrać krótszą drogę, lub na 1, aby wybrać dłuższą. Ustaw sweep-flag na 0 lub 1, aby wybrać kierunek biegu wokół elipsy. Pozostaw punkty końcowe i promienie bez zmian, zmień tylko te dwie cyfry, a zobaczysz wszystkie cztery możliwości. Specyfikacja ścieżek SVG 2 definiuje ten wybór spośród czterech łuków.

Przydaje się to, gdy zakrzywiona krawędź logo, pierścień odznaki lub ozdobny element interfejsu wygina się w niewłaściwą stronę po edycji kodu. Jeśli źródłem jest PNG, wektoryzacja może najpierw dać Ci edytowalne kształty; polecenie A służy do osobnej, świadomej edycji geometrii.

Odczytaj siedem wartości po A

Bezwzględne polecenie łuku ma następującą kolejność:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx i ry to promienie elipsy. x-axis-rotation obraca tę elipsę w bieżącym układzie współrzędnych. Każda z dwóch flag ma wartość 0 lub 1. Na końcu x y określa punkt końcowy. Początek to bieżący punkt pozostawiony przez poprzednie polecenie, często M x y. Małe a używa względnego punktu końcowego zamiast bezwzględnego; samouczek MDN dotyczący ścieżek wyjaśnia formy tych poleceń.

Na przykład M70 370 A140 110 0 0 1 280 420 zaczyna się w (70, 370), używa promieni 140 i 110, pozostawia elipsę bez obrotu, wybiera krótszą drogę z flagą sweep o wartości 1 i kończy się w (280, 420). Liczby odnoszą się do układu współrzędnych użytkownika w SVG. Nie gwarantują automatycznie określonego fizycznego rozmiaru wydruku.

Zobacz cztery możliwe łuki

Ten autorski przykład testowy wyrenderowaliśmy z jednego pliku SVG. Każdy panel używa tego samego początku (70, 370), końca (280, 420), promieni 140 110 i obrotu 0. Zmieniają się tylko flagi. Pomarańczowy kolor oznacza początek, a zielony — koniec. To renderowanie naszych własnych poleceń ścieżki w sposób odpowiadający przeglądarce, a nie wynik konwersji w PerfectVector.

Określenia „powyżej” i „poniżej” opisują ten konkretny początek, koniec i układ współrzędnych. Nie są uniwersalnymi znaczeniami 0 i 1. Inne rozmieszczenie punktów końcowych lub przekształcona grupa mogą przenieść widoczny łuk w inne miejsce. Flaga sweep wybiera kierunek rosnącego lub malejącego kąta wzdłuż wybranej elipsy; w typowym viewBox SVG, w którym oś y jest skierowana w dół, sweep 1 zwykle wygląda jak ruch zgodny z ruchem wskazówek zegara. Interaktywny edytor łuków w SVG Tutorial przydaje się do obserwowania zmian kierunku przy zachowaniu pozostałych parametrów bez zmian.

Aby odtworzyć jeden panel, zapisz poniższy kod jako arc.svg i otwórz go w przeglądarce:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Zmieniaj tylko dwie cyfry po wartości obrotu 0, korzystając z powyższej tabeli. Jeśli jednocześnie zmienisz promień lub punkt końcowy, nie będzie już wiadomo, która zmiana wpłynęła na przebieg łuku.

Popraw krzywą, która wygięła się w niewłaściwą stronę

1. Znajdź segment. W wartości d ścieżki zidentyfikuj poprzedzający go punkt początkowy, polecenie A i jego punkt końcowy. Ścieżka może zawierać kilka segmentów łuku; edytuj tylko ten, który jest nieprawidłowy.
2. Sprawdź wybór między długą a krótką drogą. Jeśli mała krzywa nagle obiega większość elipsy, przełącz large-arc-flag z 1 na 0. Jeśli planowany segment pierścienia skraca się do krótkiego łącznika, wypróbuj 1.
3. Sprawdź stronę lub kierunek biegu. Pozostaw wszystko inne bez zmian i przełącz sweep-flag. Często przenosi to łuk na drugą stronę cięciwy między punktami końcowymi.
4. Obejrzyj całą grafikę. Poprawiony segment nadal może łączyć się z sąsiednim segmentem pod nieodpowiednim kątem lub wykraczać poza viewBox. Otwórz plik ponownie w docelowym rozmiarze wyświetlania, a następnie w razie potrzeby dostosuj sąsiednią geometrię lub obszar roboczy.

Jeśli żadna para flag nie daje oczekiwanej sylwetki, problem prawdopodobnie nie leży we fladze. Promienie i punkty końcowe wyznaczają możliwe elipsy; flagi jedynie dokonują wyboru spośród nich. Przewodnik NaN po łukach pokazuje, jak zmiana promienia lub punktu końcowego zmienia elipsę będącą podstawą łuku.

Obrót i ograniczenia promieni

x-axis-rotation ma znaczenie, gdy rx i ry się różnią: obraca elipsę przed wyborem łuku. Przy równych promieniach obrót okręgu nie zmienia jego konturu. W przypadku logo z pochyloną owalną krawędzią najpierw wypróbuj docelowe promienie i obrót, a dopiero potem wybierz flagi. W przeciwnym razie możesz wybrać właściwą stronę niewłaściwej elipsy.

Uwagi implementacyjne SVG 2 definiują przypadki szczególne. Jeśli którykolwiek promień wynosi zero, segment jest traktowany jak linia prosta. Jeśli promienie są zbyt małe, by połączyć punkty końcowe, mechanizm renderujący powiększa je na tyle, aby umożliwić utworzenie łuku. Jeśli początek i koniec są identyczne, segment łuku zostaje pominięty. Te reguły wyjaśniają, dlaczego zmiana flagi czasami pozornie nic nie robi. Oznaczają też, że sam wyrenderowany obraz może nie dowodzić, że wpisane promienie zostały faktycznie użyte bez korekty.

Użyj krzywej po wektoryzacji jako punktu wyjścia, a nie wzoru na łuk

Rastrowe logo może mieć wyraźną, okrągłą obwódkę, ale odzyskany SVG może opisywać ją segmentami Béziera i węzłami zamiast jawnym poleceniem A. Wektoryzator obrazów odtwarza widoczne kształty; niekoniecznie odgaduje pierwotny środek okręgu, promienie czy flagi łuku użyte przez projektanta. Jeśli istnieje oryginalny wektorowy plik źródłowy, edytuj go zamiast ponownie wykonywać wektoryzację.

Gdy dostępny jest tylko PNG lub JPG, zamień obraz w edytowalne ścieżki wektorowe za pomocą PerfectVector, sprawdź odzyskany kontur, a następnie zdecyduj, czy wymaga precyzyjnego przerysowania geometrycznego. W przypadku pierścienia odznaki zmierz docelowy środek i promienie w edytorze grafiki wektorowej i zastąp tylko ten zakrzywiony fragment, jeśli zależy Ci na spójnej geometrii. Zachowaj zaakceptowany wynik wektoryzacji dla nieregularnej grafiki, którą dokładna elipsa by zniekształciła. Nasz przewodnik po edycji SVG omawia wybór między edytorem wizualnym a precyzyjną edycją kodu; przewodnik po porządkowaniu węzłów pomaga, gdy trudno zmienić kształt krzywej po wektoryzacji.

Ten podział pracy ma znaczenie: PerfectVector może pomóc odtworzyć ścieżki ze źródła dostępnego wyłącznie w postaci rastrowej, natomiast ustawienie dokładnych parametrów łuku i sprawdzenie połączeń pozostają decyzjami projektowymi. Nie konwertuj poprawnego SVG do PNG i nie wykonuj ponownej wektoryzacji tylko po to, by zmienić flagę.

Zanim przekażesz SVG

• Zachowaj kopię oryginału lub zaakceptowanego pliku źródłowego po wektoryzacji.
• Sprawdź kolejno punkt początkowy, punkt końcowy, promienie, obrót i wartości dwóch flag.
• Porównaj wybrany przebieg zarówno w dużym powiększeniu, jak i w rzeczywistym rozmiarze użytkowym.
• Sprawdź połączenia oraz to, czy długa droga przekracza krawędź viewBox.
• Otwórz przekazywany SVG ponownie w docelowym edytorze lub przeglądarce. Poprawny wizualnie zrzut ekranu nie dowodzi, że odbiorca może edytować ścieżkę zgodnie z zamierzeniem.

Najczęściej zadawane pytania

Co oznaczają flagi large-arc i sweep w SVG? Flaga large-arc wybiera krótszy lub dłuższy z możliwych łuków między dwoma punktami końcowymi. Flaga sweep wybiera kierunek biegu segmentu wokół elipsy. Razem pozwalają wybrać jeden z czterech wariantów, gdy geometria nie jest zdegenerowana.

Dlaczego zmiana flagi large-arc w SVG nie daje widocznego efektu? Sprawdź, czy punkty końcowe leżą naprzeciw siebie na elipsie, przez co obie drogi obejmują po połowie jej obwodu. Sprawdź też, czy punkty końcowe nie są identyczne, czy promień nie wynosi zero oraz czy mechanizm renderujący nie skorygował promieni, aby połączyć punkty. Zmieniaj jeden parametr naraz i porównuj wyrenderowaną ścieżkę.

Czy wektoryzacja obrazu może automatycznie odzyskać moje oryginalne polecenie łuku? Nie zakładaj tego. Wektoryzator może odzyskać edytowalne kształty wektorowe z grafiki rastrowej, ale wynik może używać krzywych Béziera lub wielu węzłów. Odtwórz precyzyjny okrąg lub elipsę w edytorze grafiki wektorowej, gdy potrzebujesz oryginalnej geometrii.

Źródła

1. W3C — SVG 2 Paths — Składnia łuku, kombinacje flag i geometria ścieżek.
2. W3C — SVG 2 Implementation Notes — Korekta promieni i obsługa zdegenerowanych łuków.
3. MDN — SVG Paths — Bezwzględne i względne polecenia ścieżek oraz samouczek dotyczący łuków.
4. SVG Tutorial — Arc — Interaktywne demonstracje promieni, obrotu i flag.
5. NaN — SVG Path Commands: Arcs — Interaktywne wyjaśnienie dopasowywania elipsy i wyników ustawienia flag.

Potrzebujesz edytowalnego źródła, zanim nadasz kształt emblematowi dostępnemu tylko w postaci rastrowej? Przekonwertuj obraz na ścieżki wektorowe, sprawdź wynik i przerysuj każdy łuk, którego dokładny promień lub kierunek biegu ma znaczenie.