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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.12 feComposite

Der primitive Filter feComposite kombiniert ein erstes und ein zweites Input-Bild zu einem einzigen Bild. Dabei werden die sogenannten Porter-Duff-Operationen verwendet. Dieser primitive Filter ist sinnvoll um den Output von Beleuchtungsfiltern wie feSpecularLighting oder feDiffuseLighting mit mit dem Quellbild zu vermischen.

Das zweite Input-Bild wird mit dem Attribut in2 festgelegt.

Durch einen von insgesamt 6 Werten für das Attribut operator bestimmen Sie die Porter-Duff-Operation, die für die Vermischung der beiden Input-Bilder verwendet wird. Mögliche Werte für operator sind: over (der voreingestellte Wert), in, out, atop, xor und arithmetic.

Wenn Sie den Wert arithmetic für das operator-Attribut verwenden, müssen Sie zusätzlich vier Konstanten angeben, die bei der Berechnung des Output als Faktoren verwendet werden. Diese vier Konstanten sind einzeln durch die Attribute k1, k2, k3 und k4 festzulegen. Die Voreinstellung für jedes dieser vier Attribute ist der Wert 0.

Das Output-Bild, das der primitive Filter feComposite bei Verwendung des Wertes over für das Attribut operator erzeugt, könnten Sie ebenfalls durch den Gebrauch folgender Filter erzeugen lassen:
feBlend mit dem Wert normal für das Attribut mode (siehe dort) oder feMerge und feMergeNode.

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 feComposite</title>
  <desc>
    Beispiele für die Verwendung von feComposite
  </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 feComposite -->
    <filter id="f1">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="over" />
    </filter>
    <filter id="f2">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="in" />
    </filter>
    <filter id="f3">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="out" />
    </filter>
    <filter id="f4">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="atop" />
    </filter>
    <filter id="f5">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="xor" />
    </filter>
    <filter id="f6">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feComposite in="SourceGraphic" in2="out1"
        operator="arithmetic" k1="2" k2="0" k3="0" k4="0" />
    </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">feComposite</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      

Das obige Beispiel zeigt die Darstellung der 6 verschiedenen Werte des operator-Attributs.

Als zweites Input-Bild wurde für alle Filter f1 bis f5 ein direkt zuvor durch feTurbulence erzeugtes Fraktal bestimmt. Mit diesem Fraktal wird das Quellbild durch feComposite vermischt. Dabei werden nacheinander die Werte over, in, out, atop, xor und arithmetic für das operator-Attribut verwendet.

Im folgenden Beispiel werden die primitiven Filter feGaussianBlur und feOffset verwendet um einen Schatten zu erzeugen. Hiernach wird mit den primitiven Filtern feSpecularLighting und fePointLight eine Lichtquelle erzeugt und durch feComposite mit dem Quellbild vermischt. Zuletzt wird das beleuchtete Quellbild mit dem Schatten vermischt - ebenfalls mit Hilfe von feComposite.

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 feComposite</title>
  <desc>
    Beispiele für die Verwendung von feComposite
    in Verbindung mit Beleutungsfiltern
  </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 feComposite, Schatten und Beleuchtung -->
    <filter id="f1" x="-.3" y="-.3" width="1.5" height="1.5">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2"
        result="out1" />
      <feOffset in="out1" dx="2" dy="2" result="out2" />
      <feSpecularLighting in="out1"
        surfaceScale="3" specularExponent="15"
        result="out3">
        <fePointLight x="-150" y="-150" z="100" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="out3" operator="arithmetic"
        k1="0" k2="1" k3="1" k4="0" result="out4" />
      <feComposite in="out4" in2="out2" operator="over" />
    </filter>
  </defs>

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



index  |  Kapitel 14  |  14.11  <<  | 14.12 |  >>  14.13   feMerge