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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.13 feMerge

Der primitive Filter feMerge kombiniert mit Hilfe seiner Kind-Elemente feMergeNode mehrere Input-Bilder zu einem einzigen Bild. Dabei wird die Porter-Duff-Operation over verwendet. Die einzelnen Bilder werden also wie Layer übereinandergelegt, wobei das zuerst angegebene Bild zuunterst und das zuletzt angegebene Bild zuoberst angezeigt wird.

Der Output von primitiven Filtern ist oftmals nur ein Zwischenprodukt, das nur mit anderen Outputs bzw. anderen Zwischenprodukten vereint, das gewünschte Ergebnis liefert. Durch die Verwendung von feMerge und feMergeNode können Sie beliebig viele Outputs zu einem Bild zusammenfügen. Dies unterscheidet feMerge von feBlend und feComposite, die nur zwei Input-Bilder vermischen können.

Das Element feMerge dient als Container-Element. Innerhalb dieses Containers können Sie beliebig viele Kind-Elemente feMergeNode platzieren.

Über das Attribut in, das jedem einzelnen Kind-Element feMergeNode zugeordnet wird, legen Sie die einzelnen Input-Bilder fest, die dann zu einem einzigen Bild zusammengefügt werden.

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 feMerge</title>
  <desc>
    Ein Beispiel für die Verwendung von feMerge
    und feMergeNode
  </desc>
  <defs>
    <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>

<!-- Filter mit feMerge und feMergeNode -->
    <filter id="f1" x="-.3" y="-.3" width="1.8" height="1.8">
<!-- out1: primitive Filter zur Erzeugung eines Hintergrunds  -->
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="tmp1" />
      <feColorMatrix in="tmp1"
        type="saturate" values=".1"
        result="out1" />
<!-- out2: primitive Filter zur Erzeugung eines Schattens -->
      <feGaussianBlur in="SourceAlpha"
        stdDeviation="3"
        result="tmp2" />
      <feOffset in="tmp2"
        dx="4" dy="2"
        result="out2" />
<!-- out3: primitiver Filter zur "Veränderung" des Smilie -->
      <feTurbulence in="SourceGraphic"
        baseFrequency=".5" type="turbulence"
        result="tmp3" />
      <feDisplacementMap in="SourceGraphic" in2="tmp3"
        result="tmp3" />
      <feMorphology in="tmp3"
        operator="dilate" radius=".5"
        result="out3" />
<!-- Vermengung der Output-Bilder out1 bis out3 (bedeutet:
     Aufeinanderlegen der erzeugenten Layer out1 bis out3
     in der angegebenen Reihenfolge). -->
      <feMerge>
        <feMergeNode in="out1" />
        <feMergeNode in="out2" />
        <feMergeNode in="out3" />
      </feMerge>
    </filter>
  </defs>

<!-- die Instanz des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(15,20) scale(8)"
    filter="url(#f1)" />
</svg>
      

Im einzigen Filter f1 des obigen Beispiels werden feMerge und feMergeNode verwendet, um drei Output-Bilder zu vermengen. Diese drei Output-Bilder, die auch als Layer bezeichnet werden können, werden also übereinandergelegt. Dabei überdeckt der jeweils nachfolgende Layer den zuvor angegebenen, d.h. die Reihenfolge der Layer innerhalb des feMerge-Containers ist von großer Bedeutung.

Der erste Layer out1 wird durch den primitiven Filter feTurbulence in Verbindung mit feColorMatrix erzeugt. feTurbulence füllt den Canvas des Zielelements vollständig mit einem Fraktal. In diesem Output-Bild wird danach durch feColorMatrix die Farbsättigung vermindert. Es wird also ein farbverminderters Hintergrundbild erzeugt.

Der zweite Layer out2 beinhaltet einen durch feGaussianBlur und feOffset einen Fallschatten (drop shadow).

Im dritten und letzten Layer out3 wird durch feTurbulence eine Turbulenz erzeugt, die dem folgenden feDisplacementMap zur Verschiebung der Pixel des Quellbildes dienen. Das daraus resultierende leicht gesprenkelte Bild des Smilies wird zuletzt durch die Verwendung von feMorphology verdünnt.

Zu guter Letzt werden die drei erzeugen Layer out1 bis out3 durch feMerge und feMergeNode übereinandergelegt.




index  |  Kapitel 14  |  14.12  <<  | 14.13 |  >>  14.14   feColorMatrix