Elemente an Pfaden entlang bewegen

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

Bewegungen lassen sich realisieren, indem Sie Elemente einer Grafik an einem sichtbaren oder unsichtbaren Pfad entlang bewegen. Dies soll nun an einem Beispiel gezeigt werden. Die Basis bildet das SVG-Logo aus dem vorherigen Kapitel:

Die zu erstellende Animation

Abbildung: Die zu erstellende Animation.

Dabei soll das Logo um einen roten Punkt ergänzt werden, der dann an der blauen Sichel entlang bewegt wird, wie dies der Pfeil in der Abbildung verdeutlicht.

Hinweis:
Der verwendete Code des Beispiels verzichtet auf das transform-Attribut für den Pfad, sodass die Sichel und der Text nicht gedreht werden. Das vereinfacht für den Anfang die Realisation der Animation.

Das zu bewegende Element erstellen

Da hier ein Kreis bewegt werden soll, kann dieser entweder als <circle>- oder <ellipse>-Tag definiert werden. Nachfolgend wird der <circle>-Tag verwendet.

Hinweis:
SVG-Dateien sind deshalb so klein, weil sie nur die Anweisungen enthalten, aus denen der Browser bzw. das Plug-In die Grafik herstellt. Je komplexer diese Anweisungen sind und je langsamer der Rechner ist, auf dem die SVG-Datei angezeigt werden soll, desto mehr Zeit benötigt das Plug-In bzw. der Browser, um die Grafik zu rendern. Daher sollten Sie immer die Anweisungen verwenden, die gerade für das erzielte Ergebnis ausreichen, um die Komplexität so gering wie möglich zu halten. Sie können als Anhaltspunkt für die Auswahl von folgender Regel ausgehen: Je mehr Attribute ein Element hat, desto komplexer ist im Allgemeinen die Formel zum Berechnen des Elements, die der Browser ausführen muss. Wählen Sie daher immer Elemente mit weniger Attributen aus, wenn das für das Ergebnis ausreicht. Wenn Sie einen Kreis erzeugen möchten, verwenden Sie somit <circle> und nicht <ellipse>.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <text x="100" y="130" style="font-family:'Arial Black';font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text>
  <path id="sichel" d="M130 80 Q333 96 215 135 Q315 96 130 80" style="stroke:rgb(0,0,0);stroke-width:1;fill:rgb(0,0,139)"/>
  <text style="alignment-baseline:text-bottom;baseline-shift:5;font-family:Arial;font-size:11;fill:darkblue" >
    <textPath xlink:href="#sichel" startOffset="5">Scalable Vector Graphics</textPath>
  </text>
  <circle cx="130" cy="80" r="3" style="fill:red;stroke:none"></circle>
</svg>

Das Ergebnis des Codes sieht dann wie folgt aus:

Der erzeugte rote Punkt für die Animation

Abbildung: Der erzeugte rote Punkt für die Animation.

Die Animation hinzufügen

Was jetzt noch fehlt, ist die Animation, die dafür sorgt, dass der Punkt sich bewegt. Dazu fügen Sie das Element <animateMotion> in den <circle>-Tag ein.

<circle cx="130" cy="80" r="3" style="fill:red;stroke:none">
  <animateMotion path="M0 0 Q203 16 85 55" />
</circle>

Den Verlauf des Pfades, auf dem sich das Element bewegen soll, definieren Sie in der path-Angabe des Tags. Dafür gelten die gleichen Regeln wie für das d-Attribut des <path>-Tags. Sie können daher die erste Hälfte des d-Attributs verwenden, mit dem Sie die Sichel definiert haben. Sie legt ja die äußere Linie der Sichel fest. Allerdings gilt es zu beachten, dass sich die Positionsangaben immer relativ zur Anfangsposition des zu bewegenden Objekts beziehen. Daher müssen Sie von den Koordinaten die x- und y-Positionen des Kreises abziehen. Sie berechnen sich daher wie folgt:

  • Koordinaten der Sichel: d="M130 80 Q333 96 215 135"
  • Mittelpunkt des Kreises: x="130" y="80"
  • Ergebnis: path="M(130-130) (80-80) Q(333-130) (96-80) (215-130) (135-80)" = path="M0 0 Q203 16 85 55"

Die Geschwindigkeit festlegen

Wenn Sie die Grafik speichern und ausführen, werden Sie nichts von einer Animation sehen. Das liegt daran, dass Sie noch nicht festgelegt haben, wie lange die Animation dauern soll. Daher wird 0 Sekunden gewählt, womit die Animation nicht sichtbar ist.

Die Geschwindigkeit der Animation legen Sie implizit über die Dauer der Animation fest. Dies definiert das Attribut dur. Mit dur="6s" bestimmen Sie beispielsweise, dass die Animation sechs Sekunden dauert. Wie schnell sich das Element bewegt, hängt davon ab, welche Strecke in dieser Zeit zurückgelegt werden muss. Je länger sie ist, desto schneller muss das Objekt bewegt werden, um die Strecke in der gewünschten Zeit zu bewältigen. Für das Beispiel ist dieser Wert ausreichend. Sie können einfach das Attribut wie folgt ergänzen:

<animateMotion dur="6s" path="M0 0 Q203 16 85 55" />

   

<< 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