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.
|