SVG/Filter
Der Titel dieses Artikels ist mehrdeutig. Für die gleichnamige CSS-Eigenschaft: CSS/Eigenschaften/Anzeige/filter.
Filter ermöglichen pixelorientierte Manipulationen an SVG-Vektorgrafiken und Elementen. Sie können beliebig viele Filtertypen in einem Filter kombinieren. Filterelemente erkennt man am Präfix "fe", das für "Filtereffekt" steht.
feBlend
: Überblendung zweier ObjektefeColorMatrix
: Farbänderung durch MatrixberechnungfeComponentTransfer
: Neuberechnung einzelner FarbkomponentenfeComposite
: Zusammenfügen zweier ObjektefeConvolveMatrix
: Unschärfe- und PrägefilterfeDiffuseLighting
: indirekte BeleuchtungfeDisplacementMap
: Pixelverschiebung in Abhängigkeit eines ObjektsfeFlood
: Füllen eines Objekts mit einer speziellen Farbe und TransparenzfeGaussianBlur
: erzeugt Schatten-, Licht- oder UnschärfeeffektefeImage
: lädt ein BildfeMerge
: Zusammenfügen beliebig vieler ObjektefeMorphology
: Verdicken und VerdünnenfeOffset
: VerschiebungfeSpecularLighting
direkte Beleuchtung.feTile
: Kacheln eines BildesfeTurbulence
: Texturerzeugung
Inhaltsverzeichnis
Das Filter-Element[Bearbeiten]
Einbindung[Bearbeiten]
Filtereffekte werden im filter-Element innerhalb einer Definition angelegt, welcher die gewünschten Filtertypen umschließt. Sie müssen dem Filter eine ID geben, mit der Sie ihn mit (beliebig vielen) zu filternden Elementen verknüpfen können. In diesen Elementen muss das Attribut filter
gesetzt werden. Als Wert erhält es die Referenz auf den Filter.
<defs>
<filter id="bsp">
...
</filter>
</defs>
<rect filter="url(#bsp)"/>
Allgemeine Attribute für Filterelemente[Bearbeiten]
Außer id
kennt das filter-Element eine Reihe von "Filter-Universalattributen":
Koordinaten[Bearbeiten]
x
: X-Koordinatey
Y-Koordinatewidth
: Breiteheight
: Höhe
Diese legen einen Begrenzungsrahmen fest. Ob sie gebraucht werden, hängt vom jeweiligen Filter ab und davon, ob bzw. welche Angaben schon im filter-Tag gemacht wurden. Der Koordinatenursprung ist dabei bei den meisten primitiven Filtern die obere linke Ecke der Eingangsgrafik. width
und height
haben standardmäßig der Wert 100%
, womit sie die Eingangsgrafik vollständig umschließen.
Eingangs- und Ergebniswert[Bearbeiten]
Kommen in einer Filterdefinition mehrere Filtertypen zum Einsatz, ist üblicherweise deren Reihenfolge wichtig, da das Resultat des letzten Filtertyps dem nächsten als Eingabe dient. Der erste Filtertyp nutzt die Eingangsgrafik. Sie können allerdings mit den Attributen in
und result
ein anderes Verhalten festlegen. Für in
sind folgende Attributwerte definiert:
SourceGraphic
: (Standardwert) ganze AusgangsgrafikSourceAlpha
: benutzt Alphakanal der AusgangsgrafikBackgroundImage
: verändert Bildausschnitt des SVG-Dokuments unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attributenable-background="new"
enthältBackgroundAlpha
: verändert Alphakanal des Bildausschnitts unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attributenable-background="new"
enthältFillPaint
: verändert den Wert der fill-EigenschaftStrokePaint
: verändert den Wert der stroke-Eigenschaft
<svg viewBox="0 0 880 600" >
<defs>
<filter id="sGraphic">
<feGaussianBlur stdDeviation="4" in="SourceGraphic"/>
</filter>
<filter id="sAlpha">
<feGaussianBlur stdDeviation="4" in="SourceAlpha"/>
</filter>
<filter id="bgImage">
<feGaussianBlur stdDeviation="4" in="BackgroundImage"/>
</filter>
<filter id="bgAlpha">
<feGaussianBlur stdDeviation="4" in="BackgroundAlpha"/>
</filter>
<filter id="fPaint">
<feGaussianBlur stdDeviation="4" in="FillPaint"/>
</filter>
<filter id="sPaint">
<feGaussianBlur stdDeviation="4" in="StrokePaint"/>
</filter>
</defs>
<g transform="translate(100,50)">
<text y="-5">Kein Filter</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" />
</g>
<g transform="translate(300,50)">
<text y="-5">in=SourceGraphic</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#sGraphic)"/>
</g>
<g transform="translate(500,50)">
<text y="-5">in=SourceAlpha</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#sAlpha)"/>
</g>
<g transform="translate(300,250)" enable-background="new">
<text y="-5">in=BackgroundImage</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#bgImage)"/>
</g>
<g transform="translate(500,250)" enable-background="new">
<text y="-5">in=BackgroundAlpha</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#bgAlpha)"/>
</g>
<g transform="translate(300,400)">
<text y="-5">in=FillPaint</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#fPaint)"/>
</g>
<g transform="translate(500,400)">
<text y="-5">in=StrokePaint</text>
<rect width="150" height="100" />
<circle cx="50" cy="100" r="50" filter="url(#sPaint)"/>
</g>
</svg>
Ergebniswert[Bearbeiten]
Mit dem Attribut result
können Sie auch einen Namen für das Ergebnis eines Filtertyps vergeben, und dann diesen Namen anstelle eines der obigen Attributwerte mit in
in einem anderen Filtertyp als Eingangswert nutzen.
result
der einzelnen Filter werden als Eingangswerte in
für neue Filter verwendet.Der Namensraum von result
ist auf das aktuelle Filterelement beschränkt. Wenn Sie mehrere Filterelemente in einem Dokument nutzen, können Sie die gleiche Angabe in result
in verschiedenen Filterelementen nutzen.
Weblinks[Bearbeiten]
- W3C: SVG/Filters
Generator
- jorgeatgu: Filter-Generator (der fertigen Code erzeugt, den man einfach kopieren und einfügen kann.)
Beispiele:
- developer.mozilla.org: Filter
- Paul Irish: on HTML5-video
- thenewcode: Boom, Wham, Pow! Comic Book FX Lettering with SVG FiltersAchtung: Der Sortierungsschlüssel „Filter (SVG)“ überschreibt den vorher verwendeten Schlüssel „Filter“.
fill-opacity:.5
im CSS haben beide einen halbtransparenten Hintergrund. Der FilterfeGaussianBlur
wird jeweils auf den Kreis angewandt, mit 6 verschiedenenin
-Werten.Im Firefox 39 werden Filter mit den Werten
bgImage
undbgAlpha
nicht dargestellt. Chrome und Opera stellen diese wiesourceGraphic
dar.