SVG/Tutorials/Filter/feDisplacementMap

Der primitive Filter feDisplacementMap benutzt Pixelwerte eines zweiten Bildes um die Pixel des ersten Bildes räumlich zu verschieben.

Folgende Attribute sind nötig:

• in: Eingangsgrafik
• in2: input des 2. Bildes, funktioniert wie in
• scale: Verschiebungsfaktor (Standardwert 0)

Grundlage sind die Alphawerte der 2. Eingangsgrafik. Sie können aber auch mit den Attributen xChannelSelector und yChannelSelector einen anderen Farbkanal festlegen.

• xChannelSelector: Farbkanäle R, G, B, A (Standardwert ist A)
• YChannelSelector: Farbkanäle R, G, B, A (Standardwert ist A)

Beispiel ansehen …

    <filter id="f1">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        scale="1" />
    </filter>
    <filter id="f2">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        scale="2" />
    </filter>

   <!-- zusätzlich mit feTurbulence -->
    <filter id="f3">
      <feTurbulence baseFrequency=".5" type="fractalNoise" result="out1" />
      <feDisplacementMap in="SourceGraphic" in2="out1"
        scale="5" />
    </filter>
    <filter id="f4">
      <feTurbulence baseFrequency=".5" type="turbulence" result="out1" />
      <feDisplacementMap in="SourceGraphic" in2="out1"
        scale="5" />
    </filter>

Die Grafiken in der rechten Spalte (#f3 und #f4) wurden mit feDisplacementMap verschoben. Dabei wurden Werte aus einer mit feTurbulence erzeugten zweiten Eingangsgrafik verwendet, sodass besonders die Randlinien unregelmäßig erscheinen.

Quellen

• apike.ca: feDisplacementMap
• wikibooks.de: Urfilter feDisplacementMap

Referenz

• SVG/Elemente/feDisplacementMap