Der primitive Filter feGaussianBlur,
der sogenannte "Gaussche Weichzeichner", verwischt
ein Input-Bild. Es wird also eine Unschärfe erzeugt.
Durch das Attribut stdDeviation geben Sie die Stärke
oder Ausdehnung der
Unschärfe in Form einer Zahl an. Wenn Sie zwei Werte für
stdDeviation verwenden,
bezieht sich der erste Wert auf die Ausdehnung der Unschärfe
entlang der x-Achse und der zweite Wert auf die Ausdehnung der
Unschärfe entlang der y-Achse.
Beachten Sie: Wenn Sie hohe Werte für stdDeviation verwenden,
sollten Sie den Filterbereich entsprechend groß festlegen, da
der Effekt von feGaussianBlur viel Raum benötigt.
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 feGaussianBlur</title>
<desc>
Beispiele für die Verwendung von feGaussianBlur
</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 feGaussianBlur -->
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
</filter>
<filter id="f2">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="f3" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5,.5" />
</filter>
<filter id="f4" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation=".5,1.5" />
</filter>
<!-- zusätzlich mit feBlend, feOffset und feMerge -->
<filter id="f5" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="out1" />
<feBlend in="SourceGraphic" in2="out1" mode="darken" />
</filter>
<filter id="f6" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
<feOffset in="out1" dx="2" dy="-2" result="out2" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</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">feGaussianBlur</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Innerhalb der Filter f1 bis
f4 werden im obigen Beispiel
verschiedene Werte für das Attribut
stdDeviation definiert. Auf diese Weise
werden unterschiedliche Unschärfen des Quellbildes erzeugt.
Im Filter f5 wird zusätzich noch der primitive Filter
feBlend verwendet um den Output von
feGaussianBlur mit
dem Quellbild zu verschmelzen. Das Objekt smilie hat jetzt
quasi einen Hof.
Beachten Sie, dass die Größe des Filterbereichs durch die
Attribute x, y
width und height
im filter-Element entsprechend angepasst wurde, damit
der Unschärfe-Effekt komplett dargestellt wird. Wenn der Filterbereich zu klein
ist, wird der Effekt teilweise abgeschnitten.
Der Filter f6 erzeugt einen Schatten
des referenzierende Objekts.
Dazu wird zuerst eine Unschärfe auf den Alphakanal des Bildes
erzeugt. Dann wird dieser (schwarze) Output, also der Schatten, mit Hilfe von
feOffset verschoben. Zuletzt wird das Quellbild durch
feMerge mit dem Schatten vereinigt.
|