Filter und Masken

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

In diesem Abschnitt sollen nun die einzelnen Filter näher erläutert werden. SVG unterstützt allerdings sehr viele Filter, sodass dazu eine Menge Platz erforderlich ist. Daher sollen die Parameter der Filter erläutert und anschließend an einem Beispiel verdeutlicht werden. Da die meisten Filter jedoch mehrere Attribute haben, die mit unterschiedlichen Wertekombinationen ganz verschiedene Ergebnisse liefern können, ist es oft sinnvoll, Sie probieren einfach ein paar Kombinationen aus. SVG unterstützt zur Zeit folgende Filter-Elemente:

• <feBlend> blendet zwei Objekte ineinander über.
• <feColorMatrix> ermöglicht eine Farbänderung durch eine Matrizenoperation, die jedem Pixel die in der Matrix definierten Farbanpassungen hinzufügt.
• <feComponentTransfer> dient dazu, einzelne Farbkomponenten der Grafik zu manipulieren.
• <feComposite> ermöglicht zwei Filter-Ergebnisse zu verbinden.
• <feConvolveMatrix> führt durch Berechnung benachbarte Pixel des Bildes zusammen. Die Größe der Matrix, die verwendet wird, kann über die Attribute bestimmt werden.
• <feDisplacementMap> dient dazu, Pixel einer zweiten Input-Grafik in die erste Grafik zu verlagern.
• <feFlood> erstellt eine rechteckige Farbfüllung aus den als Attribute angegebenen Werten.
• <feGaussianBlur> erzeugt einen Schatten bzw. ein Abbild des Bildes mit weichem Randverlauf.
• <feImage> integriert ein externes SVG-Element oder eine externe SVG-Grafik in den Filter.
• <feMerge> verbindet mehrere Filter-Ergebnisse miteinander.
• <feMorphology> bietet die Möglichkeit, eine Grafik fetter oder dünner zu gestalten.
• <feOffset> verschiebt das mit in ermittelte Bild an die durch Attribute definierte Position.
• <feTile> kachelt das Objekt in einer rechteckigen Fläche.
• <feTurbulence> erzeugt eine Fraktalgrafik bzw. ein Zufallsmuster.

   

<< zurück

vor >>