|
Der primitive Filter feFlood
füllt das Zielrechteck mit Farbe. Benötigt dabei kein Input-Bild.
Die Farbangabe nimmt dabei das Attribut flood-color
entgegen. Es akzeptiert aber ebenfalls Referenzen auf Verläufe oder Muster
als Wert. Voreingestellter Wert ist black.
Um für die gewählte Farbe eine Transparenz festzulegen, können
Sie vom Attribut flood-opacity Gebrauch machen.
Wie alle anderen SVG Attribute zur Einstellung von Transparenz, akzeptiert
auch flood-opacity eine Zahl
zwischen 0 und 1 als Wert.
Voreingestellter Wert ist 1.
Es ist sinnvoll feFlood in Verbindung mit anderen primitiven
Filtern einzusetzen, da
feFlood lediglich den Canvas des referenzierenden
Elements mit der angegebenen Farbe und Durchsichtigkeit füllt.
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 feFlood</title>
<desc>
Beispiele für die Verwendung von feFlood
</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 feFlood -->
<filter id="f1">
<feFlood flood-color="limegreen" />
</filter>
<filter id="f2">
<feFlood flood-color="limegreen" flood-opacity=".5" />
</filter>
<!-- zusätzlich mit feComposite -->
<filter id="f3">
<feFlood flood-color="limegreen"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="over" />
</filter>
<filter id="f4">
<feFlood flood-color="limegreen"
result="out1" />
<feComposite in="SourceGraphic" in2="out1"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0" />
</filter>
<filter id="f5">
<feFlood flood-color="limegreen"
result="out1" />
<feComposite in="out1" in2="SourceGraphic"
operator="in" />
</filter>
<!-- zusätzlich mit feComposite und feBlend -->
<filter id="f6">
<feFlood flood-color="limegreen"
result="out1" />
<feComposite in="out1" in2="SourceGraphic"
operator="in"
result="out2" />
<feBlend in="SourceGraphic" in2="out2"
mode="darken" />
</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">feFlood</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
| 
