|
Der primitive Filter feOffset
verschiebt ein Input-Bild durch einen festzulegenden Vektor.
Die Verschiebung wird mit Hilfe der Attribute dx
(Verschiebung entlang der x-Achse) und dy (Verschiebung entlang
der y-Achse) bestimmt, die als Wert eine Längenangabe erwarten.
Voreingestellter Wert für beide Attribute ist 0, d.h. wenn
Sie diese Attribute nicht verwenden, zeigt feOffset
keinen sichtbaren Effekt.
Der primitive Filter feOffset ist ein
wichtiger Bestandteil für die Erzeugung von Schatteneffekten.
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 feOffset</title>
<desc>
Beispiele für die Verwendung von feOffset
</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 feOffset -->
<filter id="f1">
<feOffset in="SourceGraphic" dx="-5" dy="-5" />
</filter>
<filter id="f2">
<feOffset in="SourceGraphic" dx="5" dy="5" />
</filter>
<filter id="f3">
<feOffset in="SourceAlpha" dx="-5" />
</filter>
<filter id="f4">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
<feOffset in="out1" dx="-3" dy="2" />
</filter>
<!-- zusätzlich mit feGaussianBlur und feMerge -->
<filter id="f5" x="-25%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="out1" />
<feOffset in="out1" dx="-3" dy="2" result="out2" />
<feMerge>
<feMergeNode in="out2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="f6" x="-.3" y="-.5" width="1.9" height="1.9">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="out1" />
<feOffset in="out1" dx="4" dy="-4" 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">feOffset</text>
<text x="58" y="130">Original</text>
<line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
Im obigen Beispiel bewirken die Filter
f1 und f2 eine Verschiebung des Quellbildes. Der
Effekt von feOffset benötigt in der Regel mehr Raum,
als das Ausmaß des Orginalbildes. Der Effekt wird im Beispiel also
abgeschnitten dargestellt, da der Bereich des jeweiligen
Filters nicht angepasst wurde.
Im Filtern f3 wird
feOffset
auf den Alphakanal des
Quellbildes angewandt. Im Filter f4
wird das Alphabild zuvor noch durch die Verwendung des
primitiven Filters feGaussianBlur weichgezeichnet.
Diese Technik ist die Grundlage zur Erzeugung von Schatteneffekten.
Um einen Schatteneffekt zu erzeugen müssen Sie also zuerst der
weichgezeichnete Alphakanal des Quellbildes
etwas verschieben und diesen Output dann mit dem Quellbild vermengen (überblenden).
In den Filtern f5 und f6
wird daher zuletzt feMerge
verwendet. Dieser Filter überblendet mehrere Input-Bilder in der Reihenfolge
Ihres Vorkommens innerhalb der in-Atteribute
seiner Kind-Elemente feMergeNode.
| 
