SVG/Tutorials/Filter/feBlend

• Licht und Schatten
• Filter
  (Übersicht)
• feComponentTransfer

Der primitive Filter feBlend kann eine Komposition aus zwei Eingangsgrafiken erzeugen, indem sie pixelweise miteinander zur Ausgabe vermischt oder überblendet werden.

Folgende Attribute sind möglich:

• in: Eingangsgrafik
• in2: input des 2. Bildes, funktioniert wie in
• mode: Blend-Modus
  • normal: die Bilder werden einfach übereinandergelegt (Standardwert; enspricht feMerge)
  • darken: vergleicht die 2 Farben und wählt die dunklere
  • lighten: vergleicht die 2 Farben und wählt die hellere
  • multiply: vervielfältigt die Farben; das Ergebnis ist immer dunkler (Jede Farbe mal schwarz ist immer schwarz; jede Farbe mal weiß ist die Ausgangsfarbe)
  • screen: vervielfältigt die invertierten Farben, das Ergebnis ist immer heller

Beispiel ansehen …

    <filter id="blend1">
      <feTurbulence in="SourceGraphic"
         baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="normal" />
    </filter>

    <filter id="blend2">
      <feTurbulence in="SourceGraphic"
        baseFrequency=".2" type="fractalNoise"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="screen" />
    </filter>

In diesem Beispiel werden mit dem Filter feTurbulence wolkenähnliche Texturen erzeugt. Diese werden dann mit dem feBlend-Filter mit der Eingangsgrafik zusammengelegt.

Achtung!

Nutzer des Firefox können SMIL im Frickl nicht ausprobieren, da die animate-Elemente nicht gerendert werden.
Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!

Überblenden von Grafiken ansehen …

<filter id="Blend" x
    filterUnits="userSpaceOnUse"
    x="0" y="0" width="600" height="450">
  <feImage id="fi1" xlink:href="Lauf-1.jpg"
    x="0" y="0" width="450" height="450" result="out1" />
  <feImage id="fi2" xlink:href="Flugzeug.png"
    x="20" y="20" width="160" height="120" result="out2" />
  <feBlend id="fb" in="out1" in2="out2" mode="multiply">
    <animate attributeName="mode"
        values="normal;screen;darken;lighten"
        begin="1s"
        dur="9s"
        repeatCount="indefinite" />
  </feBlend>
</filter>

<rect x="100" y="100" width="450" height="450" filter="url(#Blend)"/>

In diesem Beispiel werden zwei Grafiken mit dem feBlend-Filter zusammengelegt. Das Element wird mit SMIL animiert, wobei sich die Werte des mode-Attributs alle 2 Sekunden ändern.

Auf apike.ca können Sie sich ansehen, wie sich zwei Grafiken übereinander legen lassen.

• Licht und Schatten
• Filter
  (Übersicht)
• feComponentTransfer

Referenz

• SVG/Element/feBlend