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

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.11 feBlend

Der primitive Filter feBlend setzt ein erstes und ein zweites Input-Bild durch pixelweise Vermischung (Alpha-Blending) zu einem Bild zusammen. Dabei sind mehrere Effekte wie unter anderm multiplizieren, verdunkeln oder aufhellen möglich.

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

Durch das Attribut mode können Sie die Vermischung (Überblendung) der beiden Input-Bilder näher bestimmen. Dazu stehen diesem Attribut 5 Werte zur Verfügung, welche die Art der Berechnung festlegen: normal (voreingestellter Wert), screen, darken, lighten und multiply.

Das Output-Bild, das der primitive Filter feBlend bei Verwendung des Wertes normal für das Attribut mode erzeugt, könnten Sie ebenfalls durch den Gebrauch folgender Filter erzeugen lassen:
feComposite mit dem Wert over für das Attribut operator (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 feBlend</title>
  <desc>
    Beispiele für die Verwendung von feBlend
  </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>

<!-- 5 Filter mit feBlend und feTurbulence -->
    <filter id="f1">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="normal" />
    </filter>
    <filter id="f2">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="screen" />
    </filter>
    <filter id="f3">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="darken" />
    </filter>
    <filter id="f4">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="lighten" />
    </filter>
    <filter id="f5">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="multiply" />
    </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)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feBlend
  <tspan dy="-1.5"
    style="font-size:12px; text-rendering:optimizeSpeed; font-weight:normal;">
    + feTurbulence</tspan>
  </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 5 verschiedenen Werte des mode-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 feBlend vermischt. Dabei werden nacheinander die Werte normal, screen, darken, lighten und multiply für das mode-Attribut verwendet.




index  |  Kapitel 14  |  14.10  <<  | 14.11 |  >>  14.12   feComposite