Strona główna » Poradniki » Grafika SVG » Filtr Koloru

Filtr Koloru

Wstęp

Mieszanie kolorów w SVG

W celu zmiany koloru obiektu można wykorzystać filtr kolorowy feColorMatrix. W celu dokładnego zrozumienia jak działa filtr warto wiedzieć co to są macierze i jak się wykonuje na nich zadania. Oczywiście można też eksperymentować z różnymi wartościami, aby pojąć logikę przeliczeń.

Ten artykuł został podzielony na dwie części. Pierwsza z nich dotyczy podstawowych przekształceń, a druga to bardzo dokładny opis przekształceń zadawanych przez używany filtr.

Przekształcenia proste

Opis reguły

Regułę filtru feColorMatrix wstawia się jako podobiekt obiektu filter, który jest zbiorem reguł przekształcenia. Reguła feColorMatrix przyjmuje dwa argumenty: type - określa rodzaj przekształcenia oraz value - określa argumenty na podstawie, których zostanie wykonane filtrowanie.

Zmiana odcienia

W celu zmiany odcienia kolorów wybranego fragmentu grafiki należy zadeklarować regułę feColorMatrix i atrybutowi type nadać wartość hueRotate, a jako atrybut values można wpisać dowolną liczbę rzeczywistą w stopniach czyli z przedziału [0, 360).

OryginałZ filtrem
values="90"
Z filtrem
values="180"

Przykładowo deklaracja reguły wygląda następująco:

  1.   <defs>
  2.     <filter id="filter0">
  3.       <feColorMatrix in="SourceGraphic" type="hueRotate" values="90"/>
  4.     </filter>
  5.   </defs>

Zmiana poziomu nasycenia kolorów

Do zmiany poziomu nasycenia kolorów obiektu w zadeklarowanej regule feColorMatrix atrybut type powinien zostać ustawiony na saturate. Tym razem atrybut values może zostać ustawiony na dowolną wartość rzeczywistością z przedziału [0, 1]. Wartość 1 odpowiada pełnemu nasyceniu kolorów, a wartość 0 całkowicie pozbawia obrazek kolorów.

Oryginał =
Z filtrem
values="1"
Z filtrem
values="0.5"
Z filtrem
values="0.0"

Przykładowo deklaracja reguły wygląda następująco:

  1.   <defs>
  2.     <filter id="filter2">
  3.       <feColorMatrix in="SourceGraphic" type="saturate" values="0.5"/>
  4.     </filter>
  5.   </defs>

Jasność na przezroczystość

Kolejny typ reguły feColorMatrix zamienia jasność koloru na przezroczystość. Ten type ma wartości luminanceToAlpha. W tym przypadku atrybut values jest całkowicie pomijany. W tym przypadku wartość kanałów R, G, B kolorów są zamieniane na kanał przezroczystości. Może to się okazać przydatne w przypadku nakładania efektów błysku lub odbicia.

OryginałZ filtrem

Przykładowo deklaracja reguły wygląda następująco:

  1.   <defs>
  2.     <filter id="filter4">
  3.       <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" values="90"/>
  4.     </filter>
  5.   </defs>

Przekształcenia zaawansowane

Teoria

Do wyjaśnienia pozostała ostatnia możliwa wartość atrybutu type. Czwarty możliwy typ umożliwia określenie matrycy przekształcenia. Atrybut type należy ustawić na wartość matrix, a następnie podać 20 wartości oddzielonych znakiem spacji. Kolejne wartości oznaczają {a00, a01, a02, a03, a04, a10, .., a20, ..} w poniższym wzorze:

A'
R'
G'
B'
1
 
 
 = 
 
 
a00a01a02a03a04
a10a11a12a13a14
a20a21a22a23a24
a30a32a32a33a34
00001
 
 
 · 
 
 
A
R
G
B
1

Przedstawiona macierz jest macierzą przekształceń wartości koloru. Wartości R, G, B, A to odpowiednio wartości kanału czerwonego, zielonego, niebieskiego oraz przezroczystości. Wektor z nich złożony jest mnożony przez macierz utworzoną z przekazanych wartości. W przypadku podania macierzy jednostkowej (tj. jedynkę dla macierzy) kolor nie zostanie zmieniony.

Generalnie wszystkie przekształcenia proste opisane wcześniej korzystają z tej macierzy podstawiając do podanej macierzy wcześniej przygotowane dane. Poniżej zostały podane niektóre przykłady macierzy użytych do przekształceń.

Oryginał
10000
01000
00100
00010
00001
Bez kanału R
00000
01000
00100
00010
00001
luminanceToAlpha
0.213+0.787s0.715-0.715s0.072-0.072s00
0.213-0.213s0.715+0.285s0.072-0.072s00
0.213-0.213s0.715-0.715s0.072+0.928s00
00010
00001

Przykładowo deklaracja reguły wygląda następująco:

  1.   <defs>
  2.     <filter id="filter5">
  3.       <feColorMatrix in="SourceGraphic" type="matrix"
  4.         values="0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
  5.     </filter>

Zadania

Zadanie 1

Narysuj na płótnie trzy kwadraty i ustaw je koło siebie. Każdy z nich powinien mieć ustawiony domyślnie czerwony kolor wypełnienia. Wykorzystaj dowolny z filtrów w celu zmiany koloru drugiego i trzeciego kwadratu od lewej. Spróbuj znaleźć takie wartości, aby kwadraty miały kolejno kolory czerwony, zielony i niebieski.

Zadanie 2

Napisz filtr, który przekształci pewien obiekt w cztery takie same obiekty, ale w lewym górnym rogu ma być obrazek bez zmiany, w prawym górnym tylko kanał R, w lewym dolnym G, a w prawym dolnm B tak jak to zostało przestawionej poniżej:

Wykorzystany obraz jest dowolny, ale najważniejsze, aby miał każdy z kolorów, aby zobaczyć, że efekt końcowy został osiągnięty. W przypadku problemów z wykonaniem wszystkich czterech wartość spróbować zrobić chociaż jedno przekształcenie obok z wybranym kanałem.