<Defs> i <Filtr>
Wszystkie filtry SVG są zdefiniowane w <defs> elementu. <defs> Element jest skrótem od definicji i zawiera definicję elementów specjalnych (such as filters) .
<filter> element jest używany do definiowania filtrów SVG. <filter> element ma wymaganego atrybutu id, który identyfikuje filtr. Grafika przypomina następnie do filtra do użycia.
SVG <feOffset>
Przykład 1
<feOffset> element jest wykorzystywany do tworzenia efektów drop shadow. Chodzi o to, aby wziąć grafiki SVG (image or element) i przenieść go trochę w płaszczyźnie xy.
Pierwszy przykład przesuwa prostokąt (with <feOffset>) , a następnie mieszać oryginału na górze przesunięcie obrazu (with <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>
Spróbuj sam " Code explanation:
- id atrybut <filter> element definiuje unikalną nazwę dla filtra
- filter atrybut <rect> elementu łączy element do "f1" filtrem
Przykład 2
Teraz przesunięcie obraz może być zamazany (with <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>
Spróbuj sam " Code explanation:
- stdDeviation atrybutem <feGaussianBlur> elementu określa ilość rozmycia
Przykład 3
Teraz sprawiają, że cień 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>
Spróbuj sam " Code explanation:
- in atrybucie <feOffset> elementu jest zmieniona na "SourceAlpha" , który używa kanału alfa dla rozmycia zamiast całego RGBA piksel
Przykład 4
Teraz cień traktować 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>
Spróbuj sam " Code explanation:
- <feColorMatrix> Filtr jest używany do przekształcania kolorów w obrazie offsetowego bliżej czarny. Te trzy wartości "0,2" w matrycy wszyscy się pomnożyć przez czerwonych, zielonych i niebieskich kanałów. Zmniejszenie ich wartości przynosi kolory bliżej czarny (black is 0)