Strona główna » Poradniki » Grafika SVG » Gradient kołowy

Gradient kołowy

Gradient kołowy

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:

  1. <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <radialGradient id="wypelnienie">
  4.       <stop offset="0%" stop-color="#FFF" />
  5.       <stop offset="100%" stop-color="#000" />
  6.     </radialGradient>
  7.   </defs>
  8.   <rect fill="url(#wypelnienie)" x="10" y="10" width="180" height="180"/>
  9. </svg>

(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.

Argumenty opcjonalne

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.

  1. <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <radialGradient id="wypelnienie2" cx="10" cy="10" gradientUnits="userSpaceOnUse">
  4.       <stop offset="0%" stop-color="#FFF" />
  5.       <stop offset="100%" stop-color="#000" />
  6.     </radialGradient>
  7.   </defs>
  8.   <rect fill="url(#wypelnienie2)" x="10" y="10" width="180" height="180"/>
  9. </svg>

Promień gradientu

Ś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.

  1. <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <radialGradient id="wypelnienie3" cx="10" cy="10" r="100%" gradientUnits="userSpaceOnUse">
  4.       <stop offset="0%" stop-color="#FFF" />
  5.       <stop offset="100%" stop-color="#000" />
  6.     </radialGradient>
  7.   </defs>
  8.   <rect fill="url(#wypelnienie3)" x="10" y="10" width="180" height="180"/>
  9. </svg>

Promień gradientu najlepiej jest określać w procentach %, ale oczywiście wielkość tą można też określać w innych jednostkach.

Początek gradientu

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.

  1. <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <radialGradient id="wypelnienie4" cx="100" cy="100" fx="10" fy="10" r="80" gradientUnits="userSpaceOnUse">
  4.       <stop offset="0%" stop-color="#FFF" />
  5.       <stop offset="100%" stop-color="#000" />
  6.     </radialGradient>
  7.   </defs>
  8.   <rect fill="url(#wypelnienie4)" x="10" y="10" width="180" height="180"/>
  9. </svg>

Więcej kolorów

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.

  1. <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <radialGradient id="wypelnienie5" gradientUnits="userSpaceOnUse">
  4.       <stop offset="0%" stop-color="#FFF" />
  5.       <stop offset="15%" stop-color="#F00" />
  6.       <stop offset="40%" stop-color="#0F0" />
  7.       <stop offset="65%" stop-color="#00F" />
  8.       <stop offset="90%" stop-color="#FFF" />
  9.     </radialGradient>
  10.   </defs>
  11.   <rect fill="url(#wypelnienie5)" x="10" y="10" width="180" height="180"/>
  12. </svg>

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).

Zadania

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).

Zadanie 1

Zadanie 2