Schatten erstellen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Einen einfachen Schatten können Sie erstellen, indem Sie den Filter <feGaussianBlur> verwenden. Er verfügt über ein Attribut, das Sie definieren müssen, sowie einige optionale, die an späterer Stelle genauer erläutert werden.

Das einzige erforderliche Attribut ist stdDeviation und bestimmt die Unschärfe des Schattens. Bei einem Wert 0, der dem Weglassen des Attributs entsprechen würde, ist keine Veränderung sichtbar. Je höher der Wert ist, desto weicher der Schatten.

Anwenden können Sie einen Filter auf jedes Objekt oder jede Gruppe von Objekten, indem Sie im style-Attribut die filter-Eigenschaft verwenden und dort hinter dem Schlüsselwort url den Namen des Filters mit vorangestelltem # angeben. Im folgenden Listing wird der definierte Filter "schatten" somit auf den Text angewendet.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <defs>
    <filter id="schatten">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
  <g style="filter:url(#schatten)">
    <text x="100" y="130" style="font-family:'Arial Black';font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text>
  </g>
</svg>

Wenn Sie das Ergebnis des Listings im Browser betrachten, sehen Sie folgende Grafik:

Der erzeugte Schatten

Abbildung: Der erzeugte Schatten.

Als Schatten ist das Ergebnis zwar durchaus brauchbar, Sie werden sich jetzt aber mit Recht fragen, wo denn das Element ist, zu dem der Schatten erzeugt wurde. Wenn Sie in Ihrem Grafikprogramm zu einem markierten Objekt einen Schatten erzeugen, wird dieser dem Objekt hinzugefügt. Das heißt, Sie haben das Objekt und dessen Schatten vorliegen. In SVG ist dies etwas anders. Wenn Sie einen Filter auf ein Objekt, wie hier den Text, anwenden, wird das Objekt im einfachsten Fall mit diesem Filter verändert. Das Original-Objekt gibt es also gar nicht mehr. Sie können jedoch mehrere Filter anwenden und diese miteinander verschmelzen. In diesem Fall können Sie für mehrere Filter die Originalgrafik als Ausgangspunkt verwenden und so auch Kopien erstellen.

Dies zeigt das folgende Beispiel. Es erzeugt neben dem Schatten auch eine versetzte Kopie des Originals. Wenn wie nachfolgend verwendet, die Kopie nach links oben versetzt wird, führt dies dazu, dass der Schatten nach rechts unten sichtbar ist.

Das Einzige, was Sie dazu ändern müssen, ist die Filter-Definition im <filter>-Tag. Sie sollte dann wie folgt lauten:

<defs>
  <filter id="schatten">
    <feGaussianBlur stdDeviation="2" result="wschatten"/>
    <feOffset in="SourceGraphic" dx="-2" dy="-2" result="original"/>
    <feMerge>
      <feMergeNode in="wschatten" />
      <feMergeNode in="original" />
    </feMerge>
  </filter>
</defs>

Wichtig ist dabei, dass Sie zunächst für den schon definierten Filter feGaussianBlur das Attribut result angeben. Als Wert bestimmen Sie einen eindeutigen Namen Ihrer Wahl, unter dem das Ergebnis des Filters zwischengespeichert wird. Danach definieren Sie den Filter <feOffset> und geben dort das Attribut in an. Damit bestimmen Sie, woher die Daten kommen sollen, die der Filter bearbeitet. Durch Angabe von "SourceGraphic" als Wert, wird die ursprüngliche Grafik verwendet. Würden Sie das Attribut weglassen, würde das Ergebnis des vorherigen Filters verwendet werden. Mit den Attributen dx und dy können Sie dann die Differenz zur ursprünglichen Position festlegen. Auch hier müssen Sie das Ergebnis des Filters wieder mit dem result-Attribut benennen. Zulässig sind numerische Werte ohne Angabe einer Einheit.

Wichtig ist dann natürlich noch, dass Sie die Ergebnisse beider Effekte vereinen müssen. Dazu verwenden Sie den <feMerge>-Tag innerhalb des <filter>-Tags. Darin definieren Sie für jedes Filterergebnis einen <feMergeNode>-Tag, der nur einen Parameter benötigt. Dies ist der Parameter in. Als Wert geben Sie die benannten Ergebnisse der Filter an. Sie werden dann in der Reihenfolge zusammengefügt, in der Sie sie im <feMerge>-Tag angeben. Da der Schatten unter dem verschobenen Originalobjekt liegen soll, müssen Sie das Ergebnis des Tags <feOffset> zuletzt angeben.

Ergebnis der beiden Filter - Kopie der Originalgrafik und Schatten

Abbildung: Ergebnis der beiden Filter - Kopie der Originalgrafik und Schatten.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de