SVG blur - rozmycie Gaussa
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 <feGaussianBlur>
Przykład 1
<FeGaussianBlur> element jest stosowany do tworzenia efektu rozmycia:
Oto kod SVG:
Przykłady
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</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
- <FeGaussianBlur> definiuje rozmycie
- w = "SourceGraphic" Ta sekcja definiuje efekt stworzony przez całego obrazu
- atrybut stdDeviation określa stopień rozmycia
- Filtr Właściwości <rect> służy do łączenia elementów z "F1" filtr