Der feBlend-Filter

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Der <feBlend>-Filter ermöglicht es, zwei Objekte auf verschiedene Arten ineinander überzublenden. Dazu stellt das Filter-Element folgende Attribute zur Verfügung. Zusätzlich gelten die Universalattribute.

  • mode legt die Art- und Weise fest, in der die Überblendung erfolgt. Dafür stehen die Werte normal, multiply, screen, darken und lighten zur Verfügung. Die Standardeinstellung ist normal. Sie wird verwendet, wenn Sie das Attribut nicht angeben.
  • in2 ermöglicht die Angabe des zweiten Objekts, das für die Überblendung erforderlich ist. Das erste Objekt bestimmen Sie über das Universalattribut in.

Zur Berechnung des Ergebnisses werden zwei Formeln benötigt. Die eine berechnet die Deckkraft des einzelnen Pixels, die andere die Farbe. Die Berechnung der Deckkraft qr erfolgt immer nach der gleichen Formel. Sie lautet:

qr = 1-(1-qa)*(1-qb)

Dabei stellt qa die Deckkraft des Pixels im ersten Bild und qb die des Pixels im zweiten Bild dar. Abhängig vom gewählten Wert für das Attribut mode werden Farben der Pixel jedoch mit unterschiedlichen Formeln berechnet. Die folgende Tabelle zeigt die verwendeten Formeln:

Tabelle: Einstellungen für den mode-Parameter von feBlend.

Einstellung für mode Formel
normal cr = (1-qa)*cb+ca
multiply cr = (1-qa)*cb+(1-qb)*ca+ca*cb
screen cr = cb+ca-ca*cb
darken cr = Min((1-qa)*cb+ca, (1-qb)*ca+cb)
lighten cr = Max((1-qa)*cb+ca, (1-qb)*ca+cb)

Dabei stellt cr die Ergebnisfarbe der Berechnung dar, ca ist die Farbe des Pixels des ersten Bildes und cb stellt die Farbe des Pixels im zweiten Bild dar. Für qb und qa gilt das oben bereits Gesagte.

Hinweis:
Der Effekt eignet sich lediglich für Objekte, die eine Transparenz aufweisen bzw. nicht zu 100% deckend sind. Ansonsten sehen Sie keinerlei Unterschiede zu normal übereinander gelegten Elementen.

Damit der Effekt funktioniert und sichtbar ist, müssen Sie zunächst eine Transparenz einbauen. Dazu können Sie bspw. die Eigenschaft fill-opacity des Textes auf 0.5 setzen. Außerdem benötigen Sie natürlich noch zwei Objekte, die überblendet werden. Dazu können Sie den Text um ein paar Pixel verschieben, indem Sie das Filter-Element <feOffset> verwenden.

<defs>
  <filter id="Blend">
    <feOffset dx="-3" dy="-3" in="SourceGraphic" result="rText"/>
    <feBlend mode="darken" in="SourceGraphic" in2="rText" />
  </filter>
  ...
</defs>
...
<g transform="translate(120,20)">
  <desc>Der Text mit Rechteck</desc>
  <rect x="0" y="0" width="150" height="75" style="fill:red;stroke:black;stroke-width:1"/>
  <text id="iText" x="20" y="55" style="filter:url(#Blend);fill-opacity:0.5; font-family:'Arial Black';font-size:46;stroke:black;fill:yellow">SVG</text>
</g>

Das Ergebnis des Effektes mit drei verschiedenen Einstellungen für das mode-Attribut zeigt die folgende Abbildung. In der linken Grafik wird mode="normal", in der Mitte mode="darken" und rechts mode="lighten" verwendet.

Der feBlend-Effekt in drei Varianten

Abbildung: Der feBlend-Effekt in drei Varianten.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de