Gradient kołowy tworzy się bardzo podobnie jak gradient liniowy. Definiuje go obiekt radialGradient wewnątrz definicji defs. Tak zadeklarowanemu gradientowi należy przypisać identyfikator id, bez tego nie będzie można go wykorzystać. Najprostsza deklaracja i zastosowanie wygląda następująco:
(2.) W definicjach został (3.) zdefiniowany gradient wypelnienie, która ma (4.) rozpoczynać się od koloru białego i (5.) kończyć na czarnym. Zdefiniowany gradient jest (8.) ustawiony jako wypełnienie kwadratu.
Gradient kołowy można dostosować na różne sposoby. Do tego celu najlepiej przypomnieć sobie jak tworzyło się koło (ogólniej elipse) w SVG. W takim obiekcie można było przypisać wartości argumentom cx i cy, które odpowiadały za położenia środka takiego obiektu. W przypadku ustalenia takich argumentów dla gradientu będzie on pozycję gradientu w obiekcie. Domyślnie jeśli te wartości nie są ustawione to są im przypisywane wartości 50% co jak można zauważyć po poprzednim przykładzie - skutkuje wyśrodkowaniem gradientu wewnątrz obiektu.
Ze względu na to, że podane pozycję mają być pobrane wewnątrz obiektu należy też dodać argument gradientUnits o wartości userSpaceOnUse. Nie ustawienie tego obiektu poskutkuje całkowicie innym gradientem.
Środek przedstawionego wcześniej gradientu faktycznie został przesunięty w lewy górny róg. Jednak jak można zauważyć nie wypełnia on całego kwadratu. Jest to spowodowane faktem, że ustalenie argumentów cx i cy jedynie przesuwa wynik gradientu z obrazka numer 1. Fakt ten można poprawić dodając argument r. Odpowiada on tak samo jak w przypadku definiowania elipsy za promień. Domyślnie jest on ustawiony na 50% co jest powodem dla którego gradient nie wypełnia całego kwadratu.
Promień gradientu najlepiej jest określać w procentach %, ale oczywiście wielkość tą można też określać w innych jednostkach.
Dotychczas udało się narysować gradient o zadanych kolorach, a następnie zostało opisana jak go przesunąć oraz rozszerzyć. Niewyjaśnione zostały jeszcze argumenty fx i fy, która odpowiadają za początek gradientu. Oznacza to, pisząc w wielkim skrócie, że gradient będzie zaczynał się w punkcie (fx, fy), a całe stopniowanie zostanie rozciągnięte w kole o promieniu r. Jeśli te argumenty są niezdefiniowane to będą miały tę samą wartość co (cx, cy).
Zastosowanie tych argumentów najłatwiej zrozumieć próbując przypisać im różne wartości, a następnie oglądając ich efekt. Poniżej znajduje się jeden z przykładów. Jak widać początkowy (biały) kolor znajduje się w punkcie (fx, fy), a pozostałe zostają odpowiednio dopasowane.
Tak samo jak w przypadku gradientu liniowego można określać z ilu kolorów ma się składać poprzez dodawanie znaczników stop w obiekcie radialGradient. Zasada ustalania konkretnych wartości i proporcji kolorów pozostaje również taka sama.
Warto zauważyć, że offset ostatniego koloru gradientu nie został ustawiony na 100% tylko na 90%. Taka zmiana jest konieczna, aby gradient nie wystawał poza wypełniany obszar (w tym przypadku kwadrat).
W celu utrwalenia nabytych umiejętności postaraj się napisać kod poniższych obrazków bez korzystania z żadnej pomocy (artykułu, notatek, dokumentacji SVG i innych).
