Cienie SVG
<defs> i <filtr>
Wszystkie filtry SVG są zdefiniowane w elemencie <defs>. Element <defs> jest skrótem od definicji i zawiera definicję elementów specjalnych (takich jak filtry).
Element <filter> służy do definiowania filtra SVG. Element <filter> ma wymagany atrybut id, który identyfikuje filtr. Grafika wskazuje następnie filtr, którego należy użyć.
SVG <feOffset>
Przykład 1
Element <feOffset> służy do tworzenia efektów cienia. Chodzi o to, aby wziąć grafikę SVG (obraz lub element) i przesunąć ją trochę w płaszczyźnie xy.
Pierwszy przykład przesuwa prostokąt (za pomocą <feOffset>), a następnie miesza oryginał na górze przesuniętego obrazu (za pomocą <feBlend>):
Oto kod SVG:
Przykład
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feBlend in="SourceGraphic" in2="offOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
Wyjaśnienie kodu:
- Atrybut id elementu <filter> definiuje unikalną nazwę filtra
- Atrybut filtra elementu <rect> łączy element z filtrem „f1”
Przykład 2
Teraz offsetowy obraz może być rozmazany (za pomocą <feGaussianBlur>):
Oto kod SVG:
Przykład
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
Wyjaśnienie kodu:
- Atrybut stdDeviation elementu <feGaussianBlur> określa stopień rozmycia
Przykład 3
Teraz spraw, aby cień był czarny:
Oto kod SVG:
Przykład
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20"
dy="20" />
<feGaussianBlur result="blurOut" in="offOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
Wyjaśnienie kodu:
- Atrybut in elementu <feOffset> został zmieniony na "SourceAlpha", który używa kanału Alpha do rozmycia zamiast całego piksela RGBA
Przykład 4
Teraz potraktuj cień jako kolor:
Oto kod SVG:
Przykład
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20"
dy="20" />
<feColorMatrix result="matrixOut" in="offOut"
type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0
1 0" />
<feGaussianBlur result="blurOut" in="matrixOut"
stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut"
mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
</svg>
Wyjaśnienie kodu:
- Filtr <feColorMatrix> służy do przekształcania kolorów w przesuniętym obrazie bliżej czerni. Wszystkie trzy wartości '0,2' w macierzy są mnożone przez kanały czerwony, zielony i niebieski. Zmniejszenie ich wartości przybliża kolory do czerni (czarny to 0)