Jednostki gradientu SVG: jeden wspólny gradient na ścieżkach logo

Aby rozciągnąć jeden gradient na osobne ścieżki SVG, użyj gradientUnits="userSpaceOnUse", ustaw punkty końcowe we współrzędnych grafiki i zachowaj ścieżki w tym samym układzie współrzędnych. Każda ścieżka odsłoni wtedy fragment gradientu odpowiadający jej położeniu. Poszczególne części logo nadal możesz edytować osobno.

Domyślne ustawienie, objectBoundingBox, dopasowuje gradient do każdego malowanego elementu. Odwołanie do tego samego identyfikatora gradientu z trzech ścieżek może więc dać trzy pełne przejścia od fioletu do pomarańczu. Zmiana jednostek usuwa to powtarzanie, ale transformacja elementu potomnego nadal może przesunąć jego własne malowanie. Dokumentacja gradientUnits w MDN definiuje przestrzeń odniesienia jako bieżącą przestrzeń użytkownika elementu korzystającego z gradientu.

W tym poradniku używamy autorskiego, trzyczęściowego znaku narysowanego bezpośrednio jako ścieżki SVG. Jeśli masz już logo w postaci grafiki wektorowej, pracuj na tym pliku źródłowym. Źródło dostępne wyłącznie jako obraz rastrowy wymaga odtworzenia geometrii przed tym etapem edycji sposobu kolorowania; szerszy poradnik wektoryzacji gradientów wyjaśnia ten wybór.

Zdecyduj, czy gradient ma obejmować każdy kształt, czy cały znak

Użyj kolorowania względem granic obiektu, gdy każda część ma mieć własny pełny gradient. Użyj wspólnych punktów końcowych w przestrzeni użytkownika, gdy lewa i prawa część mają pobierać różne kolory z jednego przejścia.

Ustawienie fill="url(#brandBlend)" na grupie przekazuje wypełnienie jej elementom potomnym. Nie sprawia jednak, że gradient oparty na prostokącie ograniczającym obiekt mierzy wspólną sylwetkę całej grupy. Elementy potomne nadal otrzymują własne malowanie. Specyfikacja serwerów malowania SVG opisuje gradienty jako zasoby, do których odwołuje się wypełnienie lub obrys elementu.

Jeden znak, cztery wybory układu współrzędnych

Ustaw punkty końcowe obejmujące całą grafikę

Ścieżki w przykładzie zajmują poziome pozycje od x=30 do x=310. To punkty końcowe gradientu. Trójkąt kończy się na x=125, środkowy blok zajmuje zakres od 140 do 210, a prawy kształt rozciąga się od 225 do 310.

Zapisz ten kod jako shared-logo.svg i otwórz go w przeglądarce:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
  <defs>
    <linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
      <stop offset="0" stop-color="#5939d8" />
      <stop offset="0.5" stop-color="#ee4380" />
      <stop offset="1" stop-color="#ffae42" />
    </linearGradient>
  </defs>
  <g fill="url(#brandBlend)">
    <path d="M30 120 L90 30 L125 120 Z" />
    <path d="M140 45 H210 V135 H140 Z" />
    <path d="M225 30 H310 L280 135 H225 Z" />
  </g>
</svg>

Powinieneś zobaczyć fioletowy trójkąt, w większości różowy środkowy blok i prawy kształt w odcieniach pomarańczu, jak w B. Puste odstępy ukrywają fragmenty tego samego gradientu; kolor nie zaczyna się od nowa wraz z początkiem kolejnej ścieżki. Zmień jeden punkt koloru, a wszystkie trzy części się zaktualizują, ponieważ odwołują się do tej samej definicji.

Aby bezpośrednio porównać wynik z A, zastąp atrybuty gradientu gradientUnits, x1, y1, x2 i y2 atrybutami x1="0%" y1="0%" x2="100%" y2="0%". Pominięcie gradientUnits przywraca ustawienie domyślne. Każdy kształt otrzymuje teraz pełne przejście kolorów.

Wartości procentowe też mają inną podstawę odniesienia: przy userSpaceOnUse odnoszą się do bieżącego obszaru widoku SVG, a nie do prostokąta ograniczającego malowany obiekt. Jawne wartości liczbowe ułatwiają analizę tego przykładu. Logo zajmujące tylko część dużego viewBox nie musi wykorzystywać całej jego szerokości do swojego gradientu.

Sprawdź transformacje, gdy jedna część ma niewłaściwy kolor

W C prawy kształt wygląda tak, jakby pozostał na swoim miejscu. Współrzędne jego ścieżki przesunięto o 60 jednostek w lewo, a grupa potomna przesunęła go o 60 jednostek w prawo:

<g transform="translate(60 0)">
  <path d="M165 30 H250 L220 135 H165 Z" />
</g>

Zastąp trzecią ścieżkę w pełnym przykładzie tą grupą, aby odtworzyć niedopasowanie. Jej widoczna lewa krawędź pozostaje na x=225, ale lokalna lewa krawędź znajduje się na x=165. Gradient korzysta z tej lokalnej przestrzeni, więc część pobiera kolor z wcześniejszego, bardziej różowego fragmentu przejścia. userSpaceOnUse nie gwarantuje jednego globalnego układu współrzędnych niezależnie od zagnieżdżonych transformacji.

W przypadku tego znaku przywróć oryginalne współrzędne trzeciej ścieżki i usuń jej indywidualne przesunięcie. Jeśli trzeba przesunąć całe logo, zastosuj transform="translate(10 0)" do istniejącej grupy zewnętrznej. Otrzymasz D: wszystkie trzy kształty i ich wspólne malowanie przesuną się razem.

Ta poprawka działa, ponieważ ścieżki są już zapisane we wspólnym układzie współrzędnych. Umieszczenie niezależnie transformowanych elementów potomnych w jeszcze jednej grupie nie usuwa ich indywidualnych transformacji. W przypadku importowanego logo sprawdź te transformacje przed ich spłaszczeniem lub przepisaniem geometrii i zachowaj kopię oryginalnego pliku źródłowego.

Kiedy przydaje się gradientTransform

gradientTransform zmienia odwzorowanie współrzędnych malowania bez zmiany geometrii ścieżki. Przydaje się, gdy celowo chcesz obrócić, pochylić lub przemieścić gradient. MDN opisuje go jako dodatkową transformację stosowaną po ustaleniu układu współrzędnych wybranego przez gradientUnits.

Unikaj dostosowywania jednej wspólnej definicji w celu skorygowania wyglądu pojedynczego elementu potomnego bez sprawdzenia pozostałych. Zmiana może wpłynąć na każdy kształt odwołujący się do tej definicji. W przypadku tego prostego logo utrzymanie grafiki we wspólnej przestrzeni ułatwia późniejszą pracę; bardziej złożona importowana grafika może wymagać definicji gradientów z osobnymi odwzorowaniami współrzędnych.

Gdzie przydaje się PerfectVector

Jeśli jedynym źródłem jest logo w formacie PNG lub JPG, PerfectVector może pomóc odtworzyć edytowalną geometrię wektorową, zanim odbudujesz spójny gradient. Zwektoryzuj logo, a następnie sprawdź sylwetkę, otwory i odrębne części w swoim edytorze. Użyj tych kształtów jako punktu wyjścia do wspólnego malowania.

Powyższy przykład został napisany ręcznie, aby wyodrębnić zachowanie współrzędnych; nie jest wynikiem konwersji w PerfectVector. Nie zakładaj, że odrysowanie pikseli o różnych odcieniach odtworzy oryginalne punkty koloru gradientu lub jego ustawienia współrzędnych. Ręczne przerysowanie prostego logo może też być szybsze. Zachowaj istniejący plik SVG, AI lub wektorowy PDF, jeśli jest dostępny.

Jeśli kształt nie przyjmuje nowego wypełnienia, skorzystaj z listy kontroli przy zmianie koloru SVG, zanim zmienisz współrzędne gradientu. Jeśli ten sam wyeksportowany plik wygląda inaczej w różnych aplikacjach, postępuj zgodnie z poradnikiem diagnozowania zmian kolorów SVG.

Otwórz plik ponownie, zanim go przekażesz

Zapisz nowy plik SVG i przetestuj dokładnie ten plik, a nie tylko obszar roboczy edytora. Sprawdź następujące kwestie:

• Identyfikator gradientu istnieje i każda ścieżka, która ma korzystać z tego gradientu, się do niego odwołuje.
• Gradient rozciąga się na cały obszar logo w zamierzonym kierunku.
• Przesunięcie całego znaku zachowuje spójność kolorów.
• Osobne części nadal można zaznaczać tam, gdzie potrzebujesz je edytować.
• Aplikacja docelowa zachowuje oczekiwany wygląd.

Płynny gradient wyrenderowany w przeglądarce pokazuje zachowanie malowania w tej przeglądarce. Nie potwierdza obsługi w każdym edytorze ani nie zamienia gradientu w geometrię do wycinania. Zachowaj wersję z jednolitymi kolorami dla procesów wymagających jednolitych kształtów oraz edytowalny plik źródłowy SVG. Poradnik o plikach SVG wyjaśnia różnicę między zawartością geometryczną pliku a jego wyświetlanym wyglądem.

Najczęściej zadawane pytania

Czy muszę scalić ścieżki, aby współdzieliły gradient? Nie. Osobne ścieżki mogą odwoływać się do jednego gradientu. Użyj userSpaceOnUse z odpowiednimi punktami końcowymi i upewnij się, że ścieżki korzystają z zamierzonego wspólnego układu współrzędnych.

Dlaczego po zgrupowaniu ścieżek gradient nadal się powtarza? Grupa może przekazać swoje wypełnienie ścieżkom potomnym, ale gradient objectBoundingBox nadal korzysta z granic każdego malowanego elementu potomnego. Ustaw punkty końcowe w przestrzeni użytkownika, gdy gradient ma obejmować cały znak.

Dlaczego kolor jednej ścieżki zmienił się po przeniesieniu jej do grupy? Transformacja tej grupy może zmienić lokalny układ współrzędnych ścieżki. Porównaj jej transformacje z transformacjami pozostałych ścieżek i przetestuj wyeksportowany plik SVG, zanim dostosujesz wspólny gradient.

Źródła

1. MDN — gradientUnits — Definiuje ustawienie domyślne, układy współrzędnych odniesienia i zachowanie wartości procentowych.
2. SVG Working Group — Paint servers — Określa zasady wielokrotnego wykorzystania gradientów, punkty koloru i sposób rozprzestrzeniania gradientu poza jego zakresem.
3. MDN — gradientTransform — Wyjaśnia dodatkowe transformacje współrzędnych gradientu.

Zaczynasz od logo rastrowego? Zamień swoje logo na edytowalne ścieżki SVG, sprawdź osobne kształty, a następnie odbuduj wspólny gradient i ponownie otwórz końcowy wyeksportowany plik, aby sprawdzić jego dopasowanie.