Gradient radialny SVG: przesuń rozbłysk przez fx i fy

Aby przesunąć rozbłysk gradientu radialnego SVG bez przesuwania grafiki, ustaw fx i fy w jego <radialGradient>. Zachowaj cx, cy, r i ścieżkę bez zmian. Przy fr="0" punkt ogniskowy rozpoczyna przejście kolorów; koło końcowe nadal kontroluje jego zewnętrzny zasięg. Jeśli rozbłysk wygląda na rozciągnięty, sprawdź gradientUnits i obwiednię kształtu przed edycją konturu.

Ten poradnik używa naszego oryginalnego szerokiego sześciokątnego znaku z otworem. Porównujemy rozbłyski wyśrodkowany i przesunięty, a potem dwie wybrane definicje malowania: elipsę względem obiektu i koło w przestrzeni użytkownika. SVG utworzono bezpośrednio w kodzie. Przykładu nie wygenerowała usługa obrysowania ani edytor.

Oddziel ognisko od koła końcowego

Gradient radialny ma koło początkowe i końcowe. W tym przykładzie fr="0" redukuje początkowe koło do punktu. fx i fy pozycjonują punkt; cx, cy i r definiują koło końcowe. Nieustawione współrzędne ogniska przyjmują domyślnie odpowiednie współrzędne środka. Opis radialGradient MDN dokumentuje te atrybuty i wartości domyślne.

Traktuj dwie edycje jako różne zadania:

Pozioma współrzędna ogniska to fx, a pionowa to fy. Zmiana obu przesuwa punkt początkowy po przekątnej. Nie zmienia punktów ścieżki ani nie przesuwa otworu.

Skopiuj kompletny SVG z przesuniętym rozbłyskiem

Zapisz go jako emblem.svg i otwórz w przeglądarce. Nie zależy od zewnętrznego obrazu lub arkusza stylów.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</svg>

Aby utworzyć kontrolę wyśrodkowaną, zmień tylko fx=".22" fy=".18" na fx=".5" fy=".5". Pozostaw pozostałe atrybuty i oba kontury w d bez zmian.

Kontur zewnętrzny rozciąga się od x=0 do 160 i od y=20 do 100. Drugi kontur definiuje otwór. fill-rule="evenodd" pozostawia otwór niepomalowany; przesunięcie gradientu go nie wypełnia. Opis fill-rule MDN wyjaśnia regułę przecięć używaną przez tę ścieżkę złożoną.

Wyśrodkowane ognisko leży w otworze, więc sam najjaśniejszy punkt jest niewidoczny. Nadal widać otaczające przejście kolorów na pierścieniu. Przesunięte ognisko trafia na lewy górny pełny pas, gdzie najjaśniejszy stopień staje się widoczny. To rozróżnienie pomaga, gdy zmiana współrzędnych pozornie niewiele daje: ognisko może leżeć za przezroczystą częścią znaku.

Dlaczego szeroki znak otrzymuje eliptyczne przejście

Przy gradientUnits="objectBoundingBox" współrzędne opisują granice malowanego obiektu. Nasz znak ma granice 160 × 80, mimo że obszar SVG ma 200 × 120. Znormalizowane koło mapuje się przez ten niekwadratowy prostokąt na elipsę. Opis gradientUnits MDN przedstawia to mapowanie.

Tutaj cx=".5" cy=".5" mapuje się na (80, 60). Promień .6 mapuje się na poziomy i pionowy promień 96 oraz 48. Przesunięte ognisko mapuje się na:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Aby uzyskać kołowy obszar końcowy w tym nieprzekształconym SVG, zastąp atrybuty współrzędnych gradientu takimi:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Wyśrodkowana kontrola używa fx="80" fy="60". Promień wynosi teraz 64 jednostki użytkownika w obu kierunkach. To inny wybrany obszar końcowy niż elipsa 96 × 48. Zmieniliśmy definicję współrzędnych i fizyczny promień; porównanie nie izoluje przełączenia jednostek. W każdej parze wyśrodkowanej/przesuniętej zmieniają się tylko współrzędne ogniska.

Używaj malowania względem obiektu, gdy przejście ma podążać za proporcjami każdego kształtu. Używaj jawnych liczb przestrzeni użytkownika, gdy położenie i kołowy zasięg należą do współrzędnych grafiki. Wspólne przejście dla oddzielnych ścieżek logo opisują jednostki gradientów SVG.

Co pokazało oryginalne porównanie w przeglądarce

Otworzyliśmy wszystkie cztery utworzone SVG w Chrome i wyświetliliśmy każdy przy 100 × 60 oraz 300 × 180 pikselach CSS. Większa wersja ułatwiała sprawdzenie lewego górnego rozbłysku. To samo przesunięcie pozostało widoczne w mniejszym rozmiarze, a otwór był przezroczysty we wszystkich przykładach.

Raport źródła przeglądarki znalazł jedną ścieżkę, brak elementów obrazu, identyczne wartości d i te same granice ścieżki 160 × 80 w czterech plikach. Oddzielne odczyty pikseli przy źródłowym rozmiarze obszaru potwierdziły zmianę malowania:

Lewa górna próbka leży we współrzędnej grafiki (35, 30); próbka otworu w (80, 60). Obserwacje opisują to źródło i sesję przeglądarki. Nie ustalają wyniku innego renderera ani zachowania importu w edytorze.

Ognisko i granice malowania

Utrzymuj ognisko wewnątrz podczas dopracowywania znaku

Zacznij od ogniska wewnętrznego i fr="0". We współrzędnych znormalizowanych odległość przesuniętego punktu od środka wynosi około .425, mniej niż nasz promień .6. W wersji przestrzeni użytkownika wynosi około 51.6, mniej niż 64. Oba wybory utrzymują punkt początkowy wewnątrz koła końcowego w układzie współrzędnych, w którym zdefiniowano koło.

Starsze opisy mogą mówić, że ognisko zewnętrzne zawsze zostaje ograniczone do koła końcowego. SVG 2 pozwala na początkowe koło poza nim i definiuje inne zachowanie, w tym niepomalowane obszary poza stożkiem gradientu. Specyfikacja gradientów radialnych SVG 2 wyjaśnia zmianę. Ten przykład używa punktów wewnętrznych; nie testowaliśmy renderowania zewnętrznego ogniska między przeglądarkami.

Zachowaj spreadMethod="pad" podczas kontroli położenia. Poza zasięgiem gradientu pad używa koloru ostatniego stopnia; repeat i reflect wprowadzają powtarzanie, które może zaciemniać porównanie ogniska. Opis spreadMethod MDN definiuje te opcje.

Przed przekazaniem sprawdź trzy rzeczy w środowisku, które wyświetli SVG:

1. Rozbłysk znajduje się na zamierzonym pełnym pasie przy rzeczywistym rozmiarze wyświetlania.
2. Otwór pozostaje przezroczysty, a dane ścieżki nadal odpowiadają wzorcowi.
3. Wybrane koło lub elipsa pasuje do proporcji znaku.

Jeśli kolory zmieniają się po eksporcie, zbadaj malowanie i kontekst przekazania z poradnikiem dlaczego kolory SVG zmieniają się po eksporcie. Przesunięcie ogniska jest edycją położenia, więc jednoczesna zmiana kolorów stopni utrudnia ocenę porównania.

Oddziel odzyskiwanie geometrii od projektowania malowania

Zachowaj płaski wzorzec tego znaku, używając tej samej ścieżki z jednolitym wypełnieniem i zachowując otwór. Zapisz wersję gradientową osobno dla grafiki internetowej, która jej wymaga. Gradient jest malowaniem przypisanym do konturu; współrzędne ogniska nie definiują dodatkowych ścieżek cięcia.

Jeśli początkowe logo istnieje tylko jako PNG lub JPG, wektoryzator logo PerfectVector może odzyskać geometrię wektorową do sprawdzenia przed odtworzeniem malowania. Sprawdź kontur zewnętrzny i otwór, a następnie ustaw współrzędne gradientu w swoim procesie SVG. Rastrowy rozbłysk nie zachowuje pierwotnych fx, fy lub promienia jako możliwych do odzyskania parametrów projektu. Jeśli masz już czyste kontury wektorowe, edytuj ich gradient bezpośrednio. Poradnik wektoryzacji gradientów opisuje decyzję o zamianie rastra na wektor.

Najczęstsze pytania

Jak przesunąć rozbłysk gradientu radialnego SVG? Ustaw jawne współrzędne fx i fy w radialGradient. Zachowaj cx, cy, r, stopnie gradientu i ścieżkę podczas porównywania zmiany. Przy fr równym zero współrzędne ogniska pozycjonują początek przejścia kolorów.

Dlaczego gradient radialny wygląda eliptycznie w moim SVG? Przy jednostkach objectBoundingBox znormalizowane koło mapuje się przez granice malowanego obiektu. Niekwadratowe granice dają elipsę. W nieprzekształconym SVG jawne współrzędne userSpaceOnUse mogą definiować kołowy obszar w jednostkach grafiki.

Czy przesunięcie ogniska wypełni otwór w logo? Nie. Otwór wyznaczają ścieżka złożona i jej reguła wypełnienia. Przykład używa evenodd i zachowuje tę samą ścieżkę w każdej wersji; otwór pozostaje przezroczysty podczas przesuwania ogniska.

Czy wektoryzacja odzyska pierwotne współrzędne ogniska gradientu? Obraz rastrowy nie zachowuje oryginalnych parametrów gradientu SVG. W razie potrzeby odzyskaj i sprawdź kontury, a następnie odtwórz malowanie i sprawdź rozbłysk w docelowym środowisku wyświetlania.

Źródła

1. MDN radialGradient — Atrybuty koła początkowego/końcowego i ich wartości domyślne.
2. MDN fx — Znaczenie poziomej współrzędnej ogniska.
3. MDN fy — Znaczenie pionowej współrzędnej ogniska.
4. MDN fill-rule — Wypełnienie parzyste-nieparzyste dla otworu.
5. MDN gradientUnits — Granice obiektu, przestrzeń użytkownika i mapowanie eliptyczne.
6. Gradienty radialne SVG 2 — Geometria koła początkowego i zmiana specyfikacji ogniska zewnętrznego.
7. MDN spreadMethod — Zachowania pad, repeat i reflect.