> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Gradient radialny SVG: przesuń rozbłysk przez fx i fy > Przesuń rozbłysk gradientu radialnego SVG przez fx i fy, porównaj kołowe i eliptyczne wypełnienie oraz zachowaj kontur i przezroczysty otwór znaku bez zmian. Source: https://perfectvector.com/pl/blog/svg-radial-gradient-focus Language: pl Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Aby przesunąć rozbłysk gradientu radialnego SVG bez przesuwania grafiki, ustaw `fx` i `fy` w jego ``. 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) dokumentuje te atrybuty i wartości domyślne. Traktuj dwie edycje jako różne zadania: | Oczekiwana zmiana | Co edytować | Co zachować w porównaniu | | ----------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------- | | Przesunięcie najjaśniejszego obszaru w lewy górny róg | `fx` i `fy` | Współrzędne koła końcowego, stopnie gradientu i ścieżkę | | Przesunięcie całego obszaru malowania | `cx` i `cy`, po sprawdzeniu jawnych współrzędnych ogniska | Ścieżkę | | Zmiana zasięgu malowania | `r` | Środek, ognisko i ścieżkę | | Zachowanie kołowego obszaru malowania na szerokim kształcie | Wybór współrzędnych przestrzeni użytkownika | Sprawdzenie wszystkich współrzędnych i promienia | Pozioma współrzędna ogniska to [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx), a pionowa to [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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 ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) 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: ```text 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: ```svg 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](https://perfectvector.com/pl/blog/svg-gradient-units). ## 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: | Definicja malowania | Ognisko | Lewa górna próbka RGBA | Alfa otworu | | ------------------------------------ | ------------ | ---------------------- | ----------- | | Granice obiektu, promień `.6` | Wyśrodkowane | `164, 77, 84, 255` | `0` | | Granice obiektu, promień `.6` | Przesunięte | `246, 184, 155, 255` | `0` | | Przestrzeń użytkownika, promień `64` | Wyśrodkowane | `149, 67, 82, 255` | `0` | | Przestrzeń użytkownika, promień `64` | Przesunięte | `248, 196, 168, 255` | `0` | 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** ![Schemat koncepcyjny porównujący położenia rozbłysku na znakach i pokazujący prowadnice granic malowania.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *Ilustracja: rozbłysk może przesuwać się wewnątrz niezmienionego konturu. Prowadnice wyjaśniają geometrię malowania; to nie jest przykład przeglądarkowy ani wynik obrysowania.* ## 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](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) 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](https://perfectvector.com/pl/blog/why-svg-colors-change-after-export). 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](https://perfectvector.com/pl/vectorize-logo) 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](https://perfectvector.com/pl/blog/vectorize-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Atrybuty koła początkowego/końcowego i ich wartości domyślne. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Znaczenie poziomej współrzędnej ogniska. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Znaczenie pionowej współrzędnej ogniska. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Wypełnienie parzyste-nieparzyste dla otworu. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Granice obiektu, przestrzeń użytkownika i mapowanie eliptyczne. 6. [Gradienty radialne SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Geometria koła początkowego i zmiana specyfikacji ogniska zewnętrznego. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Zachowania pad, repeat i reflect. ## Explore - [Read the HTML article](https://perfectvector.com/pl/blog/svg-radial-gradient-focus) - [Gradient SVG wzdłuż ścieżki: sprawdź kolor na zakręcie](https://perfectvector.com/pl/blog/svg-gradient-curved-stroke.md) - [SVG feColorMatrix: zmieniaj kolory bez zmiany wypełnień](https://perfectvector.com/pl/blog/svg-fecolormatrix.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)