SVG/Filter/feDisplacementMap

Aus SELFHTML-Wiki
< SVG‎ | Filter
Wechseln zu: Navigation, Suche

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

  • SVG 1.1
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari
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.

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)


Quellen[Bearbeiten]

  1. W3C: feDisplacementMap

Referenz[Bearbeiten]