SVG - gradient liniowy

czwartek, 28 czerwiec 2012 15:45 pwimmer
Drukuj

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:

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.