SVG/Element/feDisplacementMap

Das feDisplacementMap-Element benutzt Pixelwerte eines zweiten Bildes um die Pixel des ersten Bildes räumlich zu verschieben.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
filter

erlaubte Inhalte

animate, set

Attribute

Name	Inhalt	Standardwert	Bedeutung
in	String (text)		Eingangsgrafik
in2	String (text)		2. Eingangsgrafik
scale	NUMBER	0	Verschiebungsfaktor
xChannelSelector	R, G, B, A	A	Farbkanal der Verschiebung
yChannelSelector	R, G, B, A	A	Farbkanal der Verschiebung

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<filter id="f4">
  <feTurbulence baseFrequency=".5" type="turbulence" result="out1" />
  <feDisplacementMap in="SourceGraphic" in2="out1" scale="5" />
</filter>

Siehe auch

• SVG/Tutorials/Filter
• SVG/Tutorials/Text/Filter-Effekte Turbulenzeffekte

Weblinks

• W3C (Spezifikation): feDisplacementMap
• apike.ca: feDisplacementMap
• wikibooks.de: Urfilter feDisplacementMap

Live-Beispiel

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.