Das Filter-Element feDisplacementMap

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

Mit diesem Filter-Element können Sie zwei Grafiken in der Weise manipulieren, dass die Pixel aus der ersten Grafik in die zweite verschoben werden. Das funktioniert nach folgender Formel:

P'(x,y) <- P(x + scale * ((XC(x,y) - .5), y + scale * (YC(x,y) - .5))

Dabei stellt P'(x,y) das berechnete Pixel an der Position x/y dar, P(x,y) ist das Pixel des mit in festgelegten Bildes und die Werte XC und YC legen Sie über die Attribute xChannelSelector und yChannelSelector fest. Das Filter-Element verfügt neben den Universalattributen außerdem über die folgenden Attribute:

  • scale legt den Skalierungsfaktor der Verschiebung fest. Wenn Sie den Wert nicht angeben, wird der Wert 0 verwendet.
  • xChannelSelector legt den Farbkanal der mit in2 bestimmten Grafik fest. Die Pixel werden auf die x-Achse der mit in festgelegten Grafik verschoben. Für das Attribut stehen die Werte "R", "G", "B" und "A" zur Verfügung. Gleichzeitig bestimmt dieses Attribut den Wert des Ausdrucks XC(x,y) in der Formel.
  • yChannelSelector legt den Farbkanal der mit in2 bestimmten Grafik fest. Die Pixel werden auf die y-Achse der mit in festgelegten Grafik verschoben. Für das Attribut stehen die Werte "R", "G", "B" und "A" zur Verfügung. Gleichzeitig bestimmt dieses Attribut den Wert des Ausdrucks YC(x,y) in der Formel.
  • in2 legt das zweite Bild fest. Das funktioniert genauso wie das Universalattribut in.
<filter id="scale10Rot">
  <feOffset dx="0" dy="0" in="SourceGraphic" result="rText"/>
  <feDisplacementMap in="SourceGraphic" in2="rText" scale="10" xChannelSelector="R" yChannelSelector="R"/>
</filter>
<filter id="scale10Alpha">
  <feOffset dx="0" dy="0" in="SourceAlpha" result="rText"/>
  <feDisplacementMap in="SourceGraphic" in2="rText" scale="10" xChannelSelector="A" yChannelSelector="A"/>
</filter>

Das Ergebnis der definierten feDisplacementMap-Filter

Abbildung: Das Ergebnis der definierten feDisplacementMap-Filter.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de