SVG/Tutorials/Filter/feBlend

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Filter
Wechseln zu: Navigation, Suche

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.[1]

Quellen

  1. apike.ca: feBlend-Filter

Referenz