Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

SVG - gradient liniowy

Email Drukuj PDF

Gradient to gładkie przejście od jednego koloru do drugiego. Specyfikacja SVG wyróżnia dwa rodzaje gradientów - liniowe (Linear) i radialne (Radial), które można też określić mianem promienistych. W tym miejscu omówimy liniowe.

Gradienty liniowe mogą być poziome, pionowe lub kątowe.

Przyjrzyjmy się konstrukcji gradientu poziomego.

<svg width="350" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
      <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
    </linearGradient>
  </defs>
    <rect height="150" width="300" y="20" x="20" 
    stroke-width="1" stroke="#000000" fill="url(#grad1)"/>
</svg>

Sekcja defs zawiera definicję gradientu, natomiast obiekt pod nią - w naszym przypadku prostokąt rect - odwołuje się do definicji gradientu za pomocą atrybutu fill.

Musimy teraz przeanalizować skladnię polecenia i sposób działania gradientu.

Ponieważ jest to gradient liniowy, wprowadzamy go za pomocą polecenia linearGradient.

id="nazwa_gradientu" wprowadza unikatową nazwę gradientu, do której odwołuje się obiekt za pomocą atrybutu fill.

Wartości x1, x2, y1, y2, wyrażone w procentach, określają przestrzeń, na jakiej "rozgrywa się" gradient, gdzie zaczyna się i kończy przejście między kolorami. Jeszcze inaczej, gdzie zaczynają się (x1,y1) i kończą (x2,y2) składowe wektora definiującego gradient. Maksymalna wartość wynosi oczywiście 100%, czyli całą wysokość i/lub szerokość obiektu. W gradiencie poziomym wartości y1 i y2 są takie same (ich wartość jest obojętna), natomiast różnią się wartości x1 i x2 (w pionowym odwrotnie). Przykładowo, jeśli przyjmiemy, że x1=20%, a x2=70%, wtedy gradient będzie zachodzić na przestrzeni od 20 do 70% szerokości obiektu. Widać to w poniższym przykładzie, gdzie kolory niebieski i żółty zaczynają się przenikać na szerokości od 20%, a kończą na szerokości 70%.

Polecenie stop wprowadza kolor. Kolorów może być dwa lub więcej. Atrybut offset wyrażany w procentach wskazuje, gdzie w obszarze gradientu zaczyna się dany kolor. Atrybut stop-color określa kolor, przy czym może być on wyrażony nazwą, np. red, jaki i za pomocą symbolicznych odpowiedników, jak #FF0000 lub rgb(255,0,0). Odsyłam tu do definicji kolorów w kursie HTML.

Wyobraźmy sobie następujący przykład, w którym definicja gradientu zapisana jest następująco:

<defs>
    <linearGradient id="grad1" x1="20%" y1="0%" x2="90%" y2="0%">
        <stop offset="10%" style="stop-color:blue;stop-opacity:1" />
        <stop offset="35%" style="stop-color:red;stop-opacity:1" />
        <stop offset="60%" style="stop-color:green;stop-opacity:1" />
        <stop offset="85%" style="stop-color:yellow;stop-opacity:1" />
    </linearGradient>
</defs>

Gradient działa następująco:

  • Najpierw wartości x1="20%" i x2="90%" wycinają w prostokącie obszar o szerokości 70%, w którym generowany jest gradient.
  • Dalszy ciąg definicji wskazuje cztery kolory (blue, red, green i yellow), które pojawiają się w obszarze - niejako cztery przystanki (stop).
  • Pierwszy w kolejności kolor to blue, czyli niebieski i on właśnie zabiera pierwsze 20% obszaru przed gradientem (ważne: domyślnie przyjęta jest metoda rozkładania kolorów spreadMethod="pad" - o metodach dalej).
  • Wartość offset="10%" dla pierwszego koloru powoduje, że zajmuje on także pierwsze 10% obszaru gradientu jako jednolity kolor.
  • Kolejny kolor, red czyli czerwony, pojawia się w czystej postaci na wysokości 35% gradientu, natomiast w obszarze między 10 i 35% gradientu niebieski powoli przechodzi w czerwony.
  • Następny kolor, green czyli zielony, pojawia się w czystej postaci na wysokości 60% gradientu, natomiast w obszarze między 35 i 60% następuje stopniowe przejście od czerwonego do zielonego.
  • Ostatni kolor, yellow czyli żółty, pojawia się w czystej postaci na wysokości 85% gradientu, natomiast w obszarze między 60 i 85% następuje stopniowe przejście od zielonego do żółtego.
  • Ostatni kolor zajmuje też obszar od 85 do 100 gradientu i wypełnia 10% prostokąta za gradientem.

Konstrukcja gradientu pionowego tym się różni od konstrukcji poziomego, że tę samą wartość mają współrzędne x1 i x2, natomiast różnią się od siebie y1 i y2. Innymi słowy, gradient rozciąga się z góry na dół.

Przykładowo, pierwszy gradient w tym rozdziale, ale tym razem y1="0%" i y2="100%"

<svg width="350" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
      <stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
    </linearGradient>
  </defs>
    <rect height="150" width="300" y="20" x="20" 
    stroke-width="1" stroke="#000000" fill="url(#grad1)"/>
</svg>

I drugi przyklad, z czterema kolorami:

Natomiast w przypadku gradientu kątowego wektor gradientu ma obie dodatnie współrzędne, idzie ukośnie przez obiekt, zatem współrzędne nie są równe, np. x1=10% y1=25.5% x2=75% y2=66%. Zauważ od razu, że wektor biegnie tu od lewego górnego położenia ku dolnemu prawemu. Gdybyśmy chcieli mieć przebieg od prawego górnego do lewego dolnego, wartość x1 byłaby wyższa niż x2, np. x1=75% y1=15% x2=25% y2=78%

I kolejny przykład gradientu kątowego (w obrębie kodu svg, za prostokątem, dodany jeszcze napis, <text fill="#ffffff" font-size="30" font-family="Verdana" x="45" y="100">Gradienty w SVG</text>):

Gradienty w SVG

Powiedzieliśmy wyżej, że domyślnie przyjmowana jest metoda "rozsmarowywania" kolorów spreadMethod="pad". Powoduje ona, że kolor przed obszarem gradientu jest równy pierwszemu kolorowi w obszarze gradientu, natomiast kolor za obszarem gradientu jest równy ostatniemu kolorowi gradientu. Ma to naturalnie sens wtedy, gdy obszar gradientu jest mniejszy od obszaru obiektu.

Czyli tak naprawdę powinno się jeszcze dodać ten atrybut w definicji gradientu:

<linearGradient id="gradient01" x1="10%" y1="0%" x2="80%" y2="0%" spreadMethod="pad">

Druga wartość to spreadMethod="repeat", gdzie wartości gradientu są cyklicznie powtarzane

Trzecia wartość to spreadMethod="reflect", gdzie wartości gradientu są odbijane jak w lustrze.

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V