|
Der primitive Filter feComposite
kombiniert ein erstes und ein zweites Input-Bild
zu einem einzigen Bild. Dabei werden
die sogenannten Porter-Duff-Operationen verwendet.
Dieser primitive Filter ist sinnvoll um den Output von Beleuchtungsfiltern
wie feSpecularLighting oder feDiffuseLighting
mit mit dem Quellbild zu vermischen.
Das zweite Input-Bild wird mit dem Attribut in2
festgelegt.
Durch einen von insgesamt 6 Werten für das Attribut
operator bestimmen Sie die Porter-Duff-Operation, die für die
Vermischung der beiden Input-Bilder verwendet wird.
Mögliche Werte für operator sind:
over (der voreingestellte Wert), in,
out, atop,
xor und arithmetic.
Wenn Sie den Wert arithmetic für das
operator-Attribut verwenden,
müssen Sie zusätzlich vier Konstanten angeben, die bei der Berechnung
des Output als Faktoren verwendet werden. Diese vier Konstanten sind
einzeln durch die Attribute k1,
k2, k3
und k4 festzulegen. Die Voreinstellung für jedes dieser vier Attribute
ist der Wert 0.
Das Output-Bild, das der primitive Filter feComposite
bei Verwendung des Wertes over für das
Attribut operator erzeugt, könnten
Sie ebenfalls durch den Gebrauch folgender Filter erzeugen lassen:
feBlend mit dem
Wert normal für das
Attribut mode (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 feComposite</title>
<desc>
Beispiele für die Verwendung von feComposite
</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>
<!-- 6 Filter mit feComposite -->
<filter id="f1">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="over" />
</filter>
<filter id="f2">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="in" />
</filter>
<filter id="f3">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="out" />
</filter>
<filter id="f4">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="atop" />
</filter>
<filter id="f5">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="xor" />
</filter>
<filter id="f6">
<feTurbulence in="SourceGraphic"
baseFrequency=".2" type="fractalNoise"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic" k1="2" k2="0" k3="0" k4="0" />
</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)" />
<use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
filter="url(#f6)" />
<!-- Text und Hilfslinien -->
<text x="145" y="130">feComposite</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 6 verschiedenen Werte
des operator-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
feComposite vermischt. Dabei werden nacheinander
die Werte over, in,
out, atop,
xor und
arithmetic für das operator-Attribut
verwendet.
Im folgenden Beispiel werden die primitiven Filter
feGaussianBlur und feOffset
verwendet um einen
Schatten zu erzeugen. Hiernach wird
mit den primitiven Filtern feSpecularLighting und
fePointLight eine Lichtquelle erzeugt und durch
feComposite mit dem Quellbild
vermischt. Zuletzt wird das beleuchtete Quellbild mit dem Schatten vermischt -
ebenfalls mit Hilfe von feComposite.
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 feComposite</title>
<desc>
Beispiele für die Verwendung von feComposite
in Verbindung mit Beleutungsfiltern
</desc>
<defs>
<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>
<!-- Filter mit feComposite, Schatten und Beleuchtung -->
<filter id="f1" x="-.3" y="-.3" width="1.5" height="1.5">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"
result="out1" />
<feOffset in="out1" dx="2" dy="2" result="out2" />
<feSpecularLighting in="out1"
surfaceScale="3" specularExponent="15"
result="out3">
<fePointLight x="-150" y="-150" z="100" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="out3" operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" result="out4" />
<feComposite in="out4" in2="out2" operator="over" />
</filter>
</defs>
<!-- die Instanz des Symbols "smilie" -->
<use xlink:href="#smilie" transform="translate(0) scale(9)"
filter="url(#f1)" />
</svg>
| 
