|
Der primitive Filter feMorphology
verdickt oder verdünnt ein Input-Bild.
Mit dem Attribut operator geben Sie an, ob Sie das Bild
verdünnen oder verdicken möchten. Daher akzeptiert
operator zwei Werte: der voreingestellte Wert
erode
verdünnt das Bild, der Wert dilate verdickt das Bild.
Das Ausmaß der Verdünnung oder Verdickung legen Sie durch
das Attribut radius fest, das eine oder zwei Zahlen als Wert
akzeptiert. Wenn Sie zwei, durch Komma getrennte, Zahlen verwenden
bezieht sich die erste Zahl auf den x-Radius und die zweite
Zahl auf den y-Radius. Wenn Sie dem Attribut radius nur eine Zahl
als Wert zuweisen bezieht sich dieser Wert auf beide Radien.
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 feMorphology</title>
<desc>
Beispiele für die Verwendung von feMorphology
</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 feMorphology -->
<filter id="f1">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="f2">
<feMorphology operator="dilate" radius="1" />
</filter>
<filter id="f3">
<feMorphology radius=".5" />
</filter>
<filter id="f4">
<feMorphology operator="dilate" radius=".5" />
</filter>
<!-- zusätzlich mit feGaussianBlur, feOffset,
feTurbulence, feDisplacementMap und feMerge -->
<filter id="f5"
x="-.3" y="-.5" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="4" dy="-.5"
result="out2" />
<feTurbulence in="SourceGraphic"
baseFrequency=".7" type="turbulence"
result="out3" />
<feDisplacementMap in="SourceGraphic" in2="out3"
scale="5"
result="out4" />
<feMorphology in="out4"
operator="erode" radius=".5"
result="out5" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="out5" />
</feMerge>
</filter>
<filter id="f6"
x="-.3" y="-.5" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
<feOffset dx="4" dy="-.5"
result="out2" />
<feTurbulence in="SourceGraphic" baseFrequency=".7" type="turbulence"
result="out3" />
<feDisplacementMap in="SourceGraphic" in2="out3"
scale="5" />
<feMorphology operator="dilate" radius=".5"
result="out5" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="out5" />
</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">feMorphology</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Die Filter f1 bis
f4 zeigen unterschiedliche Effekte des
primitiven Filters feMorphology.
Die Filter f1 und
f3 verwenden den Wert erode für das
Attribut operator (Voreinstellung), das Bild wird also verdickt
dargestellt. Die Filter f2
und f4 verwenden den Wert dilate,
das Bild wird also verdünnt dargestellt.
Die Filter f5 und f6 sind
bis auf den Wert für das Attribut
operator im primitiven Filter
feMorphology identisch.
Für f5 wurde erode
und für f6 wurde dilate verwendet.
Beachten Sie: Im Filter f6 wird auf alle, nicht unbedingt notwendigen
Attribute in und result
für die einzelnen Filteroperationen verzichtet.
Das Attribut
in verwendet als voreingestellten Wert den Output des
direkt vorangegangen primitiven Filters im selben
filter-Element.
Wenn ein solcher Output nicht existiert (weil der
primitive Filter der erstplatzierte ist) verwendet
in den Wert SourceGraphic.
Das Attribut result muß nur dann ausdrücklich festgelegt werden,
wenn ein nicht direkt folgender primitiver Filter im selben
filter-Element diesen Output als Input-Bild verwenden soll.
Funktionsweise der Filter f5 und f6:
Durch den primitiven Filter feGaussianBlur
wird zuerst das Alphabild weichgezeichnet, danach wird es
mit Hilfe von feOffset verschoben. Der so erzeugte
Schatten ist das Resultat out2.
Nun wird durch feTurbulence eine Turbulenz im Bereich des
Quellbildes erzeugt, die
von der folgenden Filteroperation feDisplacementMap als zweites
Input-Bild verwendet wird. Das daraus resultierende Output-Bild wird hiernach
durch feMorphology verdickt bzw. verdünnt.
Das Resultat dieser 3 aufeinanderfolgenden Filter
trägt die Bezeichnung out5.
Zuletzt wird feMerge mit seinen
Kindern feMergeNode verwendet, um die Outputs
out2 und out5 zu vermischen.
| 
