SVG/Tutorials/Filter/Filter in SVG

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Filter(Weitergeleitet von In)
Wechseln zu: Navigation, Suche

Filter ermöglichen pixelorientierte Manipulationen an SVG-Vektorgrafiken und Elementen. Ein Filter wird konstruiert aus einzelnen Urfiltern, auch Filtereffekte oder Primitive genannt. Sie können beliebig viele Filtertypen in einem Filter kombinieren. Filterelemente erkennt man am Präfix "fe", das für "Filtereffekt" steht.


Das Filter-Element

Einbindung

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.

Beispiel 
<defs>
<filter id="bsp">
...
</filter>
</defs>

<rect filter="url(#bsp)"/>
<text filter="drop-shadow(10px 10px 0 black)">Schlagschatten</text>

In diesen Elementen muss das Attribut filter gesetzt werden.

Mögliche Werte sind:

  • url(): die Referenz auf den Filter
  • eine vordefinierte CSS-Funktion, wie sie im vorherigem Kapitel beschrieben wurden

Filter-Universalattribute

Außer id kennt das filter-Element eine Reihe von "Filter-Universalattributen":

  • x: X-Koordinate
  • y Y-Koordinate
  • width: Breite
  • height: 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.

Empfehlung: Testen Sie, ob ihr gewählter Begrenzungsrahmen für die Filter ausreicht, da manche Filter das Bild vergrößern. Darüber hinaus ist anzuraten, den Begrenzungsrahmen immer um einige Prozent zu vergrößern, da manche Filter die Grafik etwas ausdehnen.


Eingangswert in

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:

  • <filter-primitive-reference>
  • SourceGraphic: (Standardwert) ganze Ausgangsgrafik
  • SourceAlpha: benutzt Alphakanal der Ausgangsgrafik
diverse Modi für das in-Attribut ansehen …
<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>
...

Das Beispiel zeigt ein Rechteck und davor einen Kreis. Durch die Festlegung fill-opacity:.5 im CSS haben beide einen halbtransparenten Hintergrund. Der Filter feGaussianBlur wird jeweils auf den Kreis angewandt, mit 6 verschiedenen in-Werten.

Pseudo inputs

Beachten Sie:

Die folgenden Werte sind in der Spezifikation (auch in SVG2) enhalten, werden von den Browsern jedoch nicht unterstützt:[1]

  • Firefox stellt die Werte BackgroundImage, BackgroundAlpha nicht dar
  • Safari nicht BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint
  • Chrome, Edge und Opera stellt BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint als sourceGraphic dar
  • BackgroundImage: verändert Bildausschnitt des SVG-Dokuments unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attribut enable-background="new" enthält
  • BackgroundAlpha: verändert Alphakanal des Bildausschnitts unter dem Filterbereich. Dafür mus das gefilterte Objekt Teil einer Gruppierung sein, die das Attribut enable-background="new" enthält
  • FillPaint: verändert den Wert der fill-Eigenschaft
  • StrokePaint: verändert den Wert der stroke-Eigenschaft

Ergebniswert result

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.

Beispiel ansehen …
<defs> <filter id="Filter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="weichgezeichnet"/> <feSpecularLighting in="weichgezeichnet"/> surfaceScale="5" specularConstant="1" specularExponent="10" lighting-color="white" result="zwischenergebnis1"/>> <fePointLight x="-50" y="-100" z="200"/> </feSpecularLighting> <feComposite in="zwischenergebnis1"/> in2="SourceAlpha" operator="in" result=zwischenergebnis2"/> <feComposite in="SourceGraphic" in=zwischenergebnis2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" in=beleuchtet"/> <!-- Weichzeichner --> <feGaussianBlur in="SourceAlpha" stdDeviation="3" result=weichgezeichnet1"/> <!-- Verschiebung --> <feOffset in=weichgezeichnet1" dx="3" dy="3" result="weichgezeichnetVerschoben"/> <!-- Zusammenfügen --> <feMerge> <feMergeNode in="weichgezeichnetVerschoben"/> <feMergeNode in="SourceGraphic"/> <feMergeNode in=beleuchtet"/> </feMerge> </filter> </defs>
Die Ergebniswerte result der einzelnen Filter werden als Eingangswerte in für neue Filter verwendet.

Urfilter

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.




Weblinks

Generator

  • jorgeatgu: Filter-Generator (der fertigen Code erzeugt, den man einfach kopieren und einfügen kann.)

Beispiele:

  1. ↑ vanseodesign: SVG Filter Primitives—Input and Output Steven Bradley
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Tutorials/Filter/Filter_in_SVG&oldid=98181#Eingangswert_in“