Gradient SVG wzdłuż ścieżki: sprawdź kolor na zakręcie

Zwykły linearGradient SVG nie mierzy postępu wzdłuż zakrzywionej ścieżki. Maluje według wektora gradientu w układzie współrzędnych. Jeśli wstęga zawraca, dwa punkty w tej samej pozycji wzdłuż wektora mogą dostać ten sam kolor, mimo że leżą daleko od siebie wzdłuż wstęgi.

W statycznym projekcie wymagającym zmiany kolorów wokół zakrętu możesz utworzyć osobne kolorowe odcinki. Daje to kontrolę sekwencji, ale dodaje geometrię i widoczne granice kolorów. Nasz oryginalny przykład porównuje poziomy gradient z ośmioma celowymi pasami na tej samej utworzonej trasie. Oba pliki zawierają ścieżki i nie mają osadzonego obrazu.

Sprawdź, gdzie kolor się powtarza

Specyfikacja serwerów malowania SVG2 definiuje gradienty liniowe przez wektor i jego stopnie kolorów. Gradienty radialne opisuje przez własną geometrię kołową. Żadna definicja nie zamienia dowolnej ścieżki w oś koloru opartą na odległości wzdłuż trasy.

Nasza wstęga zaczyna się u góry po lewej, biegnie w prawo, skręca po półokręgu i wraca na dół po lewej. Poziomy gradient nadaje obu lewym końcom pomarańczowy kolor, a prawemu zakrętowi fioletowy. To poprawny gradient współrzędnych; odpowiada po prostu na inne pytanie projektowe niż „zmieniaj kolor od początku do końca tej trasy”.

Samouczek gradientów MDN wyjaśnia model końców i stopni. Dodanie kolejnych stopni zmienia sekwencję kolorów opartą na współrzędnych. Nie sprawia, że malowanie podąża za krzywą.

Kolor współrzędnych i utworzone pasy

Zachowaj zwykły gradient jako kontrolę

Zapisz kompletny plik jako coordinate.svg. Ścieżka używa konturu o szerokości 24 jednostek wewnątrz viewBox 200×160. Proste odcinki i prawy półokrąg tworzą jedną edytowalną linię środkową.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

Używamy gradientUnits="userSpaceOnUse", aby jawnie określić końce gradientu w źródłowym układzie współrzędnych. Zmiana na współrzędne obwiedni zmieniłaby sposób wyrażenia końców; nie wprowadziłaby malowania według odległości ścieżki. Zobacz opis gradientUnits i nasz poradnik współrzędnych gradientu.

Cała trasa jest jednym elementem path. Zachowaj tę prostą wersję jako wzorzec geometrii, nawet jeśli postanowisz przekazać bardziej złożony efekt kolorystyczny.

Utwórz sekwencję skokową wokół zakrętu

Zapisz poniższy kod jako bands.svg. Dzieli górny prosty odcinek na dwie części, półokrąg na cztery łuki, a powrotny prosty odcinek na dwie części. Kolory są przypisane w kolejności trasy, od pomarańczu na górnym początku do fioletu na dolnym końcu.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

To osiem ręcznie wybranych pasów z nierównymi długościami odcinków. Nie są obliczeniem równomiernych przyrostów koloru na jednostkę długości ścieżki i nie tworzą ciągłego cieniowania. Zaokrąglone dziesiętne końce łuków przybliżają oryginalną trasę; przykład nie twierdzi, że kontur jest identyczny pikselowo.

Opis path dokumentuje element i dane ścieżki. Każdy odcinek pozostaje linią środkową z konturem zamiast zamkniętego wypełnienia z obrysem zewnętrznym. Jeśli miejsce docelowe wymaga zamkniętych kształtów, przygotuj i sprawdź geometrię oddzielnie, zamiast traktować te fragmenty konturu jak kontury cięcia.

Używamy stroke-linecap="butt", aby sąsiednie części nie wychodziły poza końce. Okrągłe zakończenia każdego wewnętrznego odcinka nachodziłyby na sąsiednie kolory. Przejścia prostej w łuk też wymagają zgodnych kierunków; nasz poradnik gładkich połączeń opisuje osobno ciągłość geometryczną.

Porównaj dwa rozmiary i dwie pozycje

Wyrenderowaliśmy oba oryginalne pliki w Chrome przy 200×160 i 400×320 pikselach CSS. Przeglądarka dekodowała każdy SVG i malowała go na canvas, którego wymiary bufora odpowiadały wymiarom testu. Współczynnik pikseli urządzenia wynosił 2; zapisane próbki pochodzą z bufora canvas, a nie z liczenia pikseli urządzenia na zrzucie.

We współrzędnych źródłowych (60,30) i (60,130) punkty leżą na różnych prostych odcinkach trasy. Mają tę samą współrzędną poziomą, więc poziomy gradient daje im ten sam próbkowany kolor.

Pary próbek były takie same przy obu testowanych rozmiarach, z alfa 255 w pomalowanych wnętrzach. Otwarty obszar źródła (100,80) miał alfa zero we wszystkich sześciu przypadkach. Sprawdza to utworzone pliki w tej przeglądarce; nie certyfikuje każdego renderera ani wszystkich pikseli granic.

Renderowanie pasowe zachowuje widoczne skoki kolorów w obu rozmiarach. Sprawdź połączenia w rozmiarze przekazania, zwłaszcza po eksporcie lub osadzeniu. Oddzielne części mogą ujawnić szwy przez wygładzanie, zaokrąglenia lub późniejsze edycje. Większa liczba odcinków może zmniejszyć każdy krok koloru, ale tworzy też więcej ścieżek i granic do utrzymania.

Wybierz efekt przed rozwinięciem grafiki

Obrót liniowego gradientu zmienia jego kierunek. Powtarzanie zmienia rozciąganie kolorów. Żadna operacja nie sprawia, że gradient stale skręca z tą zawracającą linią środkową. Gradient radialny może pasować do kołowej kompozycji, ale ma własną geometrię malowania, a nie ogólne rozwiązanie odległości trasy.

Jeśli później dostosujesz krzywą, poprawiaj odcinki wspólnie. Zachowaj płaski wzorzec do porównywania zamierzonej trasy i przechowuj kopię efektu kolorystycznego oddzielnie. Nasz poradnik ścieżek względnych może pomóc czytać lub przesuwać bazowe polecenia ścieżek.

Jeśli początkowa grafika to PNG lub JPG i potrzebujesz edytowalnych konturów, przekonwertuj źródło przez PerfectVector, sprawdź odzyskany kształt i otwarte obszary oraz zachowaj czysty wzorzec SVG. Wybierz lub odtwórz efekt kolorystyczny po kontroli geometrii. Wektoryzacja nie gwarantuje dokładnego odzyskania ciągłego cieniowania ani nie wymyśla natywnej funkcji gradientu wzdłuż ścieżki. Istniejący czysty SVG wymaga bezpośredniej edycji malowania i geometrii; poradnik wektoryzacji obrazu wyjaśnia, kiedy pomaga konwersja rastra.

Najczęstsze pytania

Czy mogę sprawić, by linearGradient podążał za dowolnym zakrzywionym konturem? Zwykła definicja linearGradient nie udostępnia ustawienia odległości ścieżki. Wektor współrzędnych kontroluje malowanie. Przykład skokowy przypisuje oddzielne kolory oddzielnym odcinkom trasy.

Czy więcej stopni gradientu naprawi powracające kolory? Więcej stopni może dopracować przejścia wzdłuż wektora gradientu. Punkty w tej samej pozycji tego wektora nadal mają to samo malowanie oparte na współrzędnych.

Czy plik z pasami zawiera raster? Nie. Nasz przygotowany przykład zawiera osiem elementów ścieżki i żadnego elementu obrazu. Ma też widoczne kroki kolorów zamiast ciągłego gradientu odległości ścieżki.

Czy zastąpić każdy gradient oddzielnymi ścieżkami? Używaj prostszego gradientu współrzędnych, gdy odpowiada projektowi. Oddzielne odcinki są przydatne, gdy ich postęp i koszty edycji są akceptowalne; sprawdź szwy i renderowanie docelowe przed przekazaniem.

Źródła

1. W3C — Serwery malowania SVG2 — Wektory gradientów, stopnie i malowanie oparte na współrzędnych.
2. MDN — Gradienty w SVG — Tworzenie gradientów liniowych i radialnych.
3. MDN — gradientUnits — Układy współrzędnych przestrzeni użytkownika i obwiedni.
4. MDN — path — Możliwe do sprawdzenia elementy i dane ścieżek.
5. MDN — stroke-linecap — Zachowanie płaskich i okrągłych końców konturu.