|
In SVG Dokumenten müssen Sie auf Filtereffekte nicht verzichten.
Mit Hilfe von insgesamt 20 verschiedenen Elementen (sogenannten primitiven
Filtern) können Sie Filtereffekte wie Unschärfe, Farbveränderungen oder
Beleuchtung auf SVG Elemente und Objekte anwenden.
Filter werden immer in einem, durch das filter-Element
festgelegten Container definiert, der wiederum immer im
defs-Container eines SVG Dokuments platziert werden muß.
Dieser filter-Container ist zur Aufnahme der
primitiven Filter bestimmt, welche die entsprechenden Effekte erzeugen.
Damit ein so festgeleger Filter auf ein Objekt angewendet werden kann,
wird dem Objekt das Attribut oder die
Eigenschaft filter zugewiesen.
Zulässiger Wert für dieses Attribut ist eine Referenz auf den Filter in
Form einer gültigen URL.
Die verschiedenen primitiven Filter können kombiniert werden. Einige dieser
Filter sind ohne die vorherige
Verwendung anderer Filter sogar uneffektiv, d.h. mache Filter sollten kombiniert werden.
Im folgenden Beispiel wird im defs-Bereich der Grafik
ein filter-Container mit der ID
f1 definiert. Dieser Container enthält lediglich einen primitiven Filter
feGaussianBlur (Gausscher Weichzeichner).
Der Filter wird dann innerhalb der Grafik von einen g-Element
(gruppiertes Objekt aus Rechteck und Text)
durch das Attribut filter referenziert und daraufhin auf dieses Objekt
angewandt.
Beispiel Quellcode
Grafische Darstellung:
SVG (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="400px" height="260px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Anwendung eines Filters</title>
<desc>Das filter-Element und das filter-Attribut</desc>
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<g filter="url(#f1)">
<rect x="40" y="40" width="320" height="180" rx="15"
style="fill:#33cc33; stroke:black; stroke-width:3px;" />
<text x="42" y="140"
style="font-family:verdana; font-size:37px; font-weight:bold;">
feGaussianBlur
</text>
</g>
</svg>
| 
