Zaokrąglij narożniki SVG, zmieniając wypełniony kształt

Aby zaokrąglić wypełniony narożnik ścieżki SVG, zmień geometrię ścieżki. Zakończ sąsiednie proste odcinki przed wierzchołkiem, a potem połącz nowe końce krzywą. stroke-linejoin="round" zmienia namalowany obrys przy łączeniu; pozostawia oryginalny wypełniony kontur.

Samouczek zaokrągla jeden narożnik pod kątem prostym autorskiego wypełnionego emblematu. Potrzebujesz edytora tekstu i przeglądarki. Na koniec otrzymasz kompletny SVG z kołowym zaokrągleniem 20 jednostek, kontrolę dopasowania promienia i oryginalny kanciasty plik do porównania lub przywrócenia.

Zaokrąglenie to krzywa zastępująca ostry narożnik i stycznie łącząca się z sąsiednimi krawędziami. Przykład używa ćwiartki okręgu między prostymi poziomą i pionową. Nie zaokrągla automatycznie dowolnych wytrasowanych ścieżek Béziera.

Wybierz zmianę potrzebną grafice

Dokumentacja stroke-linejoin określa rysowanie obrysu w narożnikach. Użyj okrągłego łączenia, gdy chcesz zmienić malowaną krawędź. Aby zmienić wypełnioną sylwetkę, edytuj rzeczywistą ścieżkę.

Dla zwykłego prostokąta dokumentacja SVG rect opisuje rx i ry. Nasz emblemat ma też ukośną krawędź, więc zamiana na zaokrąglony prostokąt zmieniłaby więcej niż wybrany narożnik.

Jeśli problemem jest tylko długi kolec obrysu, zacznij od diagnozy kolców miter. Artykuł zmienia zamiast tego wypełnioną geometrię.

Zapisz kanciasty oryginał

Skopiuj kompletny plik do emblem-original.svg i otwórz w przeglądarce. Górny prawy wierzchołek to (170, 30). Krawędź dochodząca jest pozioma, a wychodząca biegnie w dół do (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Zachowaj plik jako wzorzec porównania. Dodanie do ścieżki stroke="#df9d34", stroke-width="8" i stroke-linejoin="round" daje okrągłą malowaną krawędź, a ciemne wypełnienie nadal sięga pierwotnego ostrego narożnika.

Zastąp narożnik łukiem 20 jednostek

Przesuń koniec dochodzącej linii 20 jednostek w lewo od wierzchołka, do (150, 30). Początek wychodzącej przesuń 20 jednostek w dół, do (170, 50). Okrąg o środku (150, 50) i promieniu 20 łączy te punkty ćwiartką łuku.

Zapisz drugi kompletny plik jako emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 oznacza łuk kołowy o promieniach poziomym i pionowym 20, zerowym obrocie, małym łuku i fladze sweep 1, kończący się w (170, 50). Specyfikacja ścieżek SVG definiuje parametry. Dla tego narożnika zgodnego z ruchem wskazówek wybierają zamierzoną ćwiartkę okręgu. Poradnik flag łuków pomaga diagnozować łuk wyginający się złą trasą.

Promień okręgu jest pionowy przy pierwszym końcu i poziomy przy drugim. Styczna podąża więc za poziomą linią dochodzącą i pionową wychodzącą. Krzywa może wyglądać okrągło, a nadal mieć załamanie na łączeniu; ta konstrukcja nadaje tym konkretnym krawędziom zgodne kierunki stycznych.

Sprawdź dopasowanie promienia do dostępnych krawędzi

Przy narożniku 90 stopni kołowe zaokrąglenie zużywa odległość równą promieniowi na każdej sąsiedniej krawędzi. Odcinek dochodzący ma 140 jednostek, ale wychodzący tylko 70. Dla tej pojedynczej konstrukcji dodatni promień nie może przekroczyć 70; wybierz mniejszy, jeśli chcesz zachować prosty fragment wychodzącej krawędzi.

Poniższa funkcja jest celowo ograniczona do tego emblematu i narożnika. Uruchom ją w konsoli JavaScript lub Node.js, aby wygenerować nową wartość d.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

Przy promieniu 80 naiwna konstrukcja zakończyłaby łuk w (170, 110), za następnym wierzchołkiem (170, 100). Kolejne V100 odwróciłoby kierunek. Odrzuć taki promień zamiast akceptować cokolwiek narysuje przeglądarka.

Dla innych kątów między prostymi krawędziami odległość styczności zależy od kąta. Dla zwykłego wypukłego narożnika o kącie wewnętrznym θ wynosi r / tan(θ / 2). Gdy zaokrąglasz oba końce wspólnej krawędzi, dwie zużyte odległości muszą razem się na niej mieścić. Wklęsłe narożniki, istniejące krzywe i złożone kształty wymagają dodatkowych decyzji geometrycznych; ta funkcja ich nie obsługuje.

Zweryfikuj zmienioną sylwetkę i zachowaj źródło

1. Otwórz oba kompletne SVG w tym samym rozmiarze i na tym samym tle.
2. Tymczasowo usuń obrys z wersji malowanego łączenia. Wypełnienie powinno odpowiadać kanciastemu oryginałowi.
3. Porównaj górny prawy kontur zaokrąglonej wersji. Pozostałe boki, ukośna krawędź i ogólne położenie powinny odpowiadać oryginałowi.
4. Uruchom kontrolę promienia z 20, potem z 80. Pierwsza tworzy pokazaną ścieżkę, druga zgłasza błąd promienia.
5. Sprawdź zapisany SVG w miejscu docelowym. Przywróć oryginał, jeśli zaokrąglenie usuwa celową cechę lub miejsce docelowe zmienia wygląd.

Uwaga o metodzie: wyrenderowaliśmy oryginalne ścieżki, okrągły obrys i zaokrąglenie w Chromium. Próbka wypełnienia (169, 31) leżała wewnątrz pierwszych dwóch i poza zaokrąglonym kształtem. Dokładna funkcja wyżej przyjęła 20 i odrzuciła 80. Sprawdziliśmy też końce łuku względem promienia i kierunków stycznych. Weryfikuje to podany przykład prostych krawędzi, a nie ogólny algorytm zaokrągleń lub wynik plotera.

Jeśli krzywa wybrzusza się na zewnątrz, sprawdź koniec łuku i flagę sweep. Jeśli pozostaje załamanie, sprawdź zgodność stycznej z sąsiednim odcinkiem; poradnik gładkich połączeń Béziera opisuje to oddzielne zadanie naprawcze. Poradnik edycji SVG opisuje otwieranie, kontrolę i zachowanie użytecznego pliku głównego.

Gdzie PerfectVector pomaga przed edycją narożników

PerfectVector odzyskuje ścieżki, gdy grafika istnieje tylko jako raster. Najpierw sprawdź odzyskany kontur, potem zdecyduj o zmianach narożników w kopii. Proces konwersji obrazu na wektor dostarcza odzyskiwanie; nie stosuje automatycznie tej konstrukcji zaokrąglenia.

Użyj oryginalnego wektora, jeśli jest dostępny. Wytrasowany kontur może zawierać odcinki Béziera i drobne nierówności inne niż w prostym przykładzie. Przerysowanie prostego zamierzonego emblematu może być łatwiejsze niż zaokrąglanie każdego trasowanego połączenia. Zachowaj zatwierdzony kształt przed celowym przeprojektowaniem i użyj poradników procesów bloga do kolejnej kontroli przekazania.

FAQ

Dlaczego okrągłe łączenie obrysu pozostawia ostry narożnik wypełnienia?

Łączenie steruje malowanym obrysem wokół ścieżki. Wypełnienie podąża za istniejącą geometrią, więc zachowuje narożnik do zastąpienia geometrii krzywą.

Czy funkcja działa na każdej ścieżce SVG?

Nie. Obsługuje jeden określony kąt prosty pokazanego emblematu o prostych krawędziach. Inne kąty, wklęsłe narożniki, krzywe i ograniczenia wspólnych krawędzi wymagają własnej konstrukcji.

Czy przygotuje to plik do cięcia?

Zmienia jeden wypełniony kontur przykładu. Sprawdź zapisaną geometrię i wykonaj kontrole wymagane przez rzeczywisty ploter lub proces produkcji; test przeglądarkowy nie potwierdza fizycznego wyniku cięcia.

Źródła

1. MDN — SVG stroke-linejoin — definiuje ustawienie malowania obrysu odróżnione w porównaniu od geometrii wypełnienia.
2. MDN — SVG rect — opisuje prostsze kontrolki promienia zwykłych prostokątów.
3. W3C — polecenia łuków eliptycznych SVG — definiuje promienie, flagi i koniec łuku użyty w kompletnej zaokrąglonej ścieżce.

Jeśli brakuje oryginalnych ścieżek, odzyskaj grafikę za pomocą PerfectVector. Sprawdź kontur względem wzorca, zapisz odzyskany plik główny i testuj celowe zmiany narożników na oddzielnej kopii w docelowym rozmiarze.