Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.7 feDisplacementMap

Der primitive Filter feDisplacementMap verwendet Bildpunkte eines zweiten Input-Bildes um ein erstes Input-Bild räumlich zu verschieben.

Das zweite Input-Bild wird durch das Attribut in2 bestimmt. Dabei kann dieses Attribut den gleichen Wert wie das Attribut in annehmen.

Wenn Sie nichts anderes festlegen, arbeitet der Filter standardmäßig mit den Alphawerten des zweiten Input-Bildes. Durch die Attribute xChannelSelector und yChannelSelector können Sie aber auch dafür sorgen, dass die Werte der Farbkanäle für die Verschiebung entlang der x- bwz. y-Achse verwendet werden. Daher sind die akzeptierten Werte für dieses Attribut: A (der voreingestellte Wert Alpha), R (rot), G (grün) und B (blau).

Den Verschiebungsfaktor legen Sie durch das Attribut scale fest. Voreingestellter Wert für scale ist 0.
Beachten Sie: Beim Wert 0 hat die Filteroperation keinen Effekt auf die Grafik. Weisen Sie diesem Attribut daher immer einen numerischen Wert ungleich 0 zu.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Der primitive Filter feDisplacementMap</title>
  <desc>
    Beispiele für die Verwendung von feDisplacementMap
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>

<!-- 6 Filter mit feDisplacementMap -->
    <filter id="f1">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        scale="1" />
    </filter>
    <filter id="f2">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        scale="2" />
    </filter>
    <filter id="f3">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        xChannelSelector="R" yChannelSelector="A" scale="1.3" />
    </filter>
    <filter id="f4">
      <feDisplacementMap in="SourceGraphic" in2="SourceGraphic"
        xChannelSelector="B" yChannelSelector="R" scale="2" />
    </filter>
<!-- zusätzlich mit feTurbulence -->
    <filter id="f5">
      <feTurbulence baseFrequency=".5" type="fractalNoise" result="out1" />
      <feDisplacementMap in="SourceGraphic" in2="out1"
        scale="5" />
    </filter>
    <filter id="f6">
      <feTurbulence baseFrequency=".5" type="turbulence" result="out1" />
      <feDisplacementMap in="SourceGraphic" in2="out1"
        scale="5" />
    </filter>
  </defs>

<!-- die Instanzen des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
    filter="url(#f1)" />
  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
    filter="url(#f2)" />
  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
    filter="url(#f3)" />
  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
    filter="url(#f4)" />
  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
    filter="url(#f5)" />
  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
    filter="url(#f6)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feDisplacementMap</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Die ersten beiden Filter f1 und f2 des obigen Beispiels verwenden SourceGraphic für beide Input-Bilder des primitiven Filters feDisplacementMap. Da die Attribute xChannelSelector und/oder yChannelSelector nicht gesetzt sind, werden die Alphawerte des zweiten Input-Bildes SourceGraphic zur Berechnung der räumlichen Verschiebung verwendet. Man hätte also ebenso den Wert SourceAlpha für das Attribut in2 verwenden können.
Die Filter f1 und f2 unterscheiden sich lediglich durch einen unterschiedlichen Skalierungsfaktor.

Bei den Filteren f3 und f4 werden die Farbkanäle für die Verschiebungswerte durch die Verwendung der Attribute xChannelSelector und yChannelSelector verändert.

In den letzten beiden Filtern f5 und f6 wird als zweites Input-Bild der Output des primitiven Filters feTurbulence verwendet. Dieser primitive Filter erzeugt entweder ein Fraktal oder eine Turbulenz und füllt dann die Region des referenzierenden Elements komplett mit dem Output-Bild auf. Der nachfolgende primitive Filter feDisplacementMap verwendet dann die Alphawerte dieses Outputs um eine Verschiebung zu berechnen. Das so erzeugte Bild, d.h. der Output von DisplacementMap wird dann am Bildschirm dargestellt.




index  |  Kapitel 14  |  14.6  <<  | 14.7 |  >>  14.8   feGaussianBlur