SVG Tutorial

begin
Voreinstellung: keine.
Mit diesem Attribute legen Sie den Beginn der Animation fest. Möglicher Wert ist eine Zeitangabe folgender Syntax:

1. hh:mm:ss.ms - Stunden:Minuten:Sekunden.Millisekunden. Dabei müssen alle Angabe zweistellig erfolgen. Sie können eine Zeitangabe dieser Form auch ohne Angabe der Stunden verwenden, also als mm:ss.ms - das spart Zeit :-). Ein Beispiel: 03:15.10 als Wert für begin würde die Animation 3 Minuten 15 Sekunden und 10 Millisekunden nach Laden der Grafik starten.
2. Zahl und optional Zeiteinheit - Bei dieser möglichen Zeitangabe können Sie eine Kommazahl gefolgt von einer Zeiteinheit verwenden. Mögliche Zeiteinheiten sind h (Stunde), min (Minute), s (Sekunde) und ms (Millisekunde). Die voreingestellte Zeiteinheit ist s (Sekunde), d.h. wenn Sie keine Zeiteinheit angeben wird Sekunde als Zeiteinheit verwendet.

Ein weiterer möglicher Wert ist ein Ereignis - ein Event, wie zum Beispiel das Überfahren des Elementes mit der Maus oder ein Klick auf das Element. Folgenden Events sind möglich:

• click - Klick auf das Element
• activate - Aktivierung des Elements durch beliebigen Zeiger (Mausklick, Taste, ..)
• mousedown - Drücken der linken Maustaste
• mouseup - Loslassen der linken Maustaste
• mouseover - Den Bereich des Elements mit dem Mauszeiger betreten
• mousemove - Bewegen der Maus über dem Bereich des Elements
• mouseout - Den Bereich des Elements mit dem Mauszeiger verlassen
• keypress/keydown - Taste gedrückt
• keyup - Taste losgelassen
• focusin - Das Element bekommt den Fokus
• focusout - Das Element verliert den Fokus

Da diese Events einen globalen Charakter haben, ist es empfehlenswert die ID des Elements, das den Event auslösen soll, gefolgt von einem Punkt vor den Event zu stellen, z.B.: elementid.click für das click-Ereignis.

dur
Voreinstellung: keine.
Mit diesem Attribute legen Sie die Dauer der Animation fest und sollte immer verwendet werden.
Möglicher Wert ist eine zulässige Zeitangabe.

end
Voreinstellung: keine.
Durch die Verwendung dieses Attributs können Sie den Zeitpunkt für das Ende der Animation bestimmen, also die Animation vorzeitig beenden.
Möglicher Wert ist eine zulässige Zeitangabe oder ein Event.
Falls Sie nicht ein Event zum vorzeitigen Abbruch verwenden, achten Sie darauf für end eine spätere Zeitangabe zu wählen als für begin festgelegt ist.

repeatCount
Voreinstellung: keine.
Wenn Sie die Animation wiederholt abspielen möchten, ist dieses Attribute das geeignete.
Es akzeptiert entweder eine Ganzzahl größer 0, die Animation wird dann so oft wiederholt wie durch die Ganzzahl angegeben, oder den Wert indefinite. Dabei wird die Animation "unendlich" wiederholt, d.h. eigentlich wird sie nur solange wiederholt, bis sie irgendein Event stoppt, wie z.B. das Laden einer anderen Seite.

repeatDur
Voreinstellung: keine.
Mit diesem Attribut legen Sie eine Zeitdauer für die Wiederholung der Animation fest.
Es akzeptiert eine Zeitangabe oder indefinite (unendlich) als zulässige Wertangabe.

fill
Voreinstellung: remove.
Das Attribut fill hat im Zusammenhang mit Animationselementen eine andere Bedeutung als ,als bisher gewohnt zum Füllen von Elementen. Sie können mit diesem fill-Attribut festlegen, ob nach Ablauf der Animation das Endbild der Animation oder der Anfangszustand des Elements dargestellt werden soll.
Durch Verwendung des Wertes freeze bleibt das Endbild der Animation auf dem Bildschirm sichtbar, mit remove wird der Anfangszustand des animierten Elements wieder angezeigt.

min
Voreinstellung: 0.
Mit diesem Attribut können Sie festlegen, wie lange die Animation innerhalb der mit dur festgelgten Dauer, mindestens abgespielt wird. Als Wert wird eine Zeitangabe akzeptiert.
Falls Sie die Animation durch Events enden lassen (z.B. durch Mausklick) kann dieses Attribut sinnvoll sein um eine Mindestspieldauer festzulegen.
Möglicherweise wird dieses Attribut noch nicht unterstützt.

max
Voreinstellung: linear.
Mit diesem Attribut können Sie festlegen, wie lange die Animation innerhalb der mit dur festgelgten Dauer, höchstens (maximal) abgespielt wird. Als Wert wird eine Zeitangabe akzeptiert.
Falls Sie längere Animation (z.B. durch Wiederholungen) mittels Events enden lassen (z.B. durch Mausklick) kann dieses Attribut sinnvoll sein um eine maximale Spieldauer festzulegen.
Möglicherweise wird dieses Attribut noch nicht unterstützt.

restart
Voreinstellung: always.
Durch das Attribut restart können Sie das Abspielverhalten der Animation bei Wiederholungen mit Hilfe von drei Werten festlegen.
Der voreingestellte Wert always bewirkt, dass die Animation grundsätzlich jederzeit neu gestartet werden kann. Der Wert whenNotActive legt fest, dass die Animation nicht neu gestartet werden kann, falls sie gerade läuft. Der letzte zulässige Wert never sorgt dafür, dass die Animation nie neu gestartet werden kann, also genau 1x abgespielt wird.

Beispiel Quellcode

<?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 xmlns="http://www.w3.org/2000/svg" width="410" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animTimingAttrs</title>
<desc>Attribute für die Zeitsteuerung von Animationen</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:24px;
            font-weight:bold; fill:limegreen;}
      rect {fill:url(#verlauf);}
    ]]>
    </style>
    <radialGradient id="verlauf"
      cx=".5" cy=".5" r=".5">
      <stop offset="0" stop-color="limegreen" />
      <stop offset=".8" stop-color="white" />
    </radialGradient>
  </defs>

<!-- Hintergrundanimation -->
<!-- bg -->
  <rect id="bg"
    x="0" y="0" width="410" height="200" />
  <animate xlink:href="#bg"
    attributeName="x"
    begin="0" dur="6"
    from="410" to="-410"
    repeatDur="15" />

<!-- Beginn der interaktiven Animationen -->
<!-- txt1 -->
  <text id="txt1" x="20" y="40"
    style="stroke:black;">
    click - jederzeit!
  </text>
  <animate xlink:href="#txt1"
    attributeName="opacity"
    begin="txt1.click" dur="3"
    from="1" to="0" />

<!-- txt2 -->
  <text id="txt2" x="20" y="80"
    style="fill:red">
    auch click - whenNotActive!
  </text>
  <animate xlink:href="#txt2"
    attributeName="opacity"
    begin="txt2.click" dur="3"
    from="1" to="0"
    restart="whenNotActive" />

<!-- txt3 -->
  <text id="txt3" x="20" y="120"
    style="fill:blue">
    2 x animate click!
  </text>
  <animate xlink:href="#txt3"
    attributeName="rotate"
    begin="txt3.click" dur="3"
    from="0" to="360"
    repeatCount="3"
    restart="whenNotActive" />
  <animate xlink:href="#txt3"
    attributeName="font-size"
    begin="txt3.click" dur="3"
    from="24" to="30"
    fill="freeze" />

<!-- txt3 -->
  <text id="txt4" x="20" y="170"
    style="fill:limegreen; font-size:44px; stroke:black;">
    mouseover!&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;mouseout!
  </text>
  <animate xlink:href="#txt4"
    attributeName="x"
    begin="txt4.mouseover" dur="1"
    from="20" to="-392"
    fill="freeze" />
  <animate xlink:href="#txt4"
    attributeName="x"
    begin="txt4.mouseout" dur="1"
    from="-392" to="20"
    fill="freeze" />
</svg>
      

Im obigen Beispiel sind 5 Animationen dargestellt, die durch unterschiedliche Verwendung der zeitsteuernden Attribute verschiedenste Eigenschaften aufweisen. Nachfolgend eine Kurzbeschreibung dieser Animationen.

• Animiertes Element (id): bg
• Animiertes Attribut: x
• Beginn: 0 Sekunden nach Laden der Grafik
• Dauer der Animation: 6 Sekunden
• Gesamtdauer der Animation: 15 Sekunden
• Anzeige nach Abspielen der Animation: Orginalbild

• Animiertes Element (id): txt1
• Animiertes Attribut: opacity
• Beginn: Beim Anklicken des Elements txt1
• Dauer der Animation: 3 Sekunden
• Gesamtdauer der Animation: 3 Sekunden
• Anzeige nach Abspielen der Animation: Orginalbild

• Animiertes Element (id): txt2
• Animiertes Attribut: opacity
• Beginn: Beim Anklicken des Elements txt2, nur wenn die Animation nicht gerade abgespielt wird.
• Dauer der Animation: 3 Sekunden
• Gesamtdauer der Animation: 3 Sekunden
• Anzeige nach Abspielen der Animation: Orginalbild

• Animiertes Element (id): txt3
• Animiertes Attribut 1: rotate
• Beginn: Beim Anklicken des Elements txt3, nur wenn die Animation nicht gerade abgespielt wird.
• Dauer der Animation: 3 Sekunden
• Gesamtdauer der Animation: 9 Sekunden (3 Abläufe)
• Anzeige nach Abspielen der Animation: Orginalbild
• ---
• Animiertes Attribut 2: font-size
• Beginn: Beim Anklicken des Elements txt3,
• Dauer der Animation: 3 Sekunden
• Gesamtdauer der Animation: 3 Sekunden
• Anzeige nach Abspielen der Animation: letztes Bild der Animation

• Animiertes Element (id): txt4
• Beginn 1: Beim Betreten des Elementbereichs von txt4.
• Animiertes Attribut: x
• Dauer der Animation: 1 Sekunde
• Gesamtdauer der Animation: 1 Sekunde
• Anzeige nach Abspielen der Animation: letztes Bild der Animation
• ---
• Beginn 2: Beim Verlassen des Elementbereichs von txt4.
• Animiertes Attribut: x
• Dauer der Animation: 1 Sekunde
• Gesamtdauer der Animation: 1 Sekunde
• Anzeige nach Abspielen der Animation: letztes Bild der Animation