SVG shadow
Uwaga: Internet Explorer i Safari nie obsługuje filtrów SVG!
<DEFS> i <Filtr>
SVG filtruje cały Internet zdefiniowana w <defs> element. <DEFS> definiuje krótki i zawiera elementy specjalne (takie jak filtry) definicji.
<Filtr> tag służy do definiowania filtrów SVG. <Filtr> tag wymaganego atrybutu id zdefiniowania aplikację graficzną, która filtruje?
SVG <feOffset>
Przykład 1
<FeOffset> element jest stosowany do tworzenia efektu cienia. Chodzi o to, aby wziąć grafiki SVG (lub elementy graficzne) i przesunąć się trochę w płaszczyźnie xy.
Pierwszy przykład przesunięcie prostokąta (z <feOffset>), a następnie miesza przesunięcie górnej części obrazu (w tym <feBlend>):
Oto kod SVG:
Przykłady
<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 »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- Jedyna nazwa <Filtr> Atrybut id elementu definiuje filtr
- Filtr Właściwości <rect> służy do łączenia elementów z "F1" filtr
Przykład 2
Teraz można przesunąć obraz staje się rozmazany (zawierające <feGaussianBlur>):
Oto kod SVG:
Przykłady
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- stdDeviation <feGaussianBlur> Właściwość element definiuje ilość rozmycia
Przykład 3
Teraz dokonać czarny cień:
Oto kod SVG:
Przykłady
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- Właściwości <feOffset> element "SourceAlpha" użytkowania rozmycie w kanale Alpha, zamiast całych RGBA pikseli.
Przykład 4
Cień jest teraz pokryty kolorem:
Oto kod SVG:
Przykłady
<defs>
<filter id="f1" 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(#f1)" />
</svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Analiza kodu:
- <FeColorMatrix> Przesunięcie filtr służy do konwersji obrazu, aby zbliżyć się do koloru czarnego. '0.2', aby uzyskać trzy wartości są mnożone przez macierz z czerwonego, zielonego i niebieskiego kanałów kolorów. Zmniejszając jego wartość przynieść kolor czarny (czarny jest 0)