SVG Tutorial

from
Voreinstellung: keine.
Mit diesem Attribut legen Sie den Startwert für die Eigenschaft des animierten Elements fest. Akzeptierte Werte sind abhängig von der entsprechenden Eigenschaft.

to
Voreinstellung: keine.
Mit diesem Attribut legen Sie den Endwert für die Eigenschaft des animierten Elements fest. Akzeptierte Werte sind abhängig von der entsprechenden Eigenschaft.

by
Voreinstellung: keine.
Mit diesem Attribut können Sie bei numerischen Eigenschaften einen additiven Endwert angeben. Der im Attribut by verwendete Wert wird mit dem im Attribut from festgelegten Wert addiert (from-Wert + by-Wert = to-wert).
by darf nicht mit dem Attribut to gemeinsam verwendet werden, da es in diesem Falle ignoriert wird.

values
Voreinstellung: keine.
Durch Verwendung des Attributs values können Sie beginnned mit dem Startwert und abschließend mit dem Endwert, eine Liste von Zwischenwerten angeben, die bei der Berechnung der Animation berücksichtigt werden. Alle Werte werden untereinander durch Semikolon getrennt und sind in ihrer Art abhängig von der animierten Eigenschaft. In den meisten Fällen sind es Längenangaben.
Verwenden Sie values anstelle der Attribute from, to und by. Bei gleichzeitiger Verwendung werden die Angaben von values interpretiert, wogegen die anderen Angaben nicht beachtet werden.
Um zusätzlich auch die Zeitsequenzen zwischen den einzelnen Übergangswerten festzulegen, können Sie das Attribut keyTimes verwenden.

calcMode
Voreinstellung: linear.
Ausnahme! Voreinstellung für das Element animateMotion: paced.
Durch das Attribut calcMode können Sie die Art und Weise, wie der user agent die Animation berechnen soll, einstellen. Dazu können Sie 4 Werte verwenden:

1. Die Verwendung des voreingestellten Wertes linear führt dazu, dass der zeitliche Übergang zwischen den einzelnen Werten gleichmäßig lang ist, und daher der Übergang fließend dargestellt wird.
2. Der Wert discrete bewirkt eine ähnliche Berechnung der Animation mit dem Unterschied, dass der Übergang sprunghaft dargestellt wird.
3. Durch den Wert paced erreichen Sie, dass die Veränderung zwischen den Werten gleichmäßig berechnet wird, dadurch ist unter Umständen der zeitliche Übergang zwischen den Werten unterschiedlich lang. Der Übergang wird fließend dargestellt.
4. Wenn Sie den Wert spline verwenden, findet die Berechnung der Übergänge anhand einer kubischen Bezierkurve statt, die sie mit Hilfe des Attributes keySplines festlegen müssen.

Interressant wird die Verwendung dieses Attributs in Zusammenhang mit dem Attribut values.

keyTimes
Voreinstellung: keine.
Dieses Attribut ist nur in Zusammenhang mit der Verwendung von values möglich. Durch keyTimes können Sie die zeitlichen Übergänge zwischen den einzelnen Werten durch Angabe von relativen Werten zwischen 0 und 1, die sich auf die Gesamtabspieldauer der Animation beziehen, festlegen. Dabei bezieht sich jeder Wert aus der, durch Semikolon getrennten Liste von relativen Angaben, auf die gleichplatzierten Werte der Liste von Werten im values-Attribut. Daher muß die Anzahl der Werte in beiden Attributen übereinstimmen.

keySplines
Voreinstellung: keine.
Dieses Attribut hat nur dann Gültigkeit, wenn zuvor das Attribut calcMode mit dem Wert spline verwendet wurde. Hier können Sie die Werte für die Kontrollpunkte der kubische Bezierkurven eintragen, die zur Berechnung der Animation zwischen den einzelnen Animationswerten (values) verwendet wird. Diese Funktionalität ist etwas für ganz besondere Ansprüche, daher verweise ich für weitere Informationen auf die SVG-Recommendation des W3C.

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="600" height="300"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>animValueAttrs</title>
<desc>Attribute/Eigenschaften für die Werteveränderung
im Zielelement einer Animation</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:12px;
            fill:black; text-rendering:optimizeSpeed;}
      rect {fill:limegreen; stroke:black;}
      line {stroke:black;}
    ]]>
    </style>
  </defs>

<!-- kasten 1 -->
  <g>
    <text x="25" y="36">
      kasten 1:
      &#160;&#160;&#160;
      from 15 to 565
    </text>
    <line x1="20" y1="40" x2="580" y2="40" />
  </g>
  <rect id="kasten1" x="15" y="45" width="20" height="10" />
  <animate xlink:href="#kasten1"
    attributeName="x"
    begin="go.click" dur="10"
    from="15" to="565"
    restart="whenNotActive"
    fill="freeze" />

<!-- kasten 2 -->
  <g>
    <text x="25" y="76">
      kasten 2:
      &#160;&#160;&#160;
      from 15 by 550
    </text>
    <line x1="20" y1="80" x2="580" y2="80" />
  </g>
  <rect id="kasten2" x="15" y="85" width="20" height="10" />
  <animate xlink:href="#kasten2"
    attributeName="x"
    begin="go.click" dur="10"
    from="15" by="550"
    restart="whenNotActive"
    fill="freeze" />

<!-- kasten 3 -->
  <g>
    <text x="25" y="116">
      kasten 3:
      &#160;&#160;&#160;
      values 15;565;15
    </text>
    <line x1="20" y1="120" x2="580" y2="120" />
  </g>
  <rect id="kasten3" x="15" y="125" width="20" height="10" />
  <animate xlink:href="#kasten3"
    attributeName="x"
    begin="go.click" dur="10"
    values="15;565;15"
    restart="whenNotActive"
    fill="freeze" />

<!-- kasten 4 -->
  <g>
    <text x="25" y="156">
      kasten 4:
      &#160;&#160;&#160;
      values 15;565;15 keyTimes 0;.8;1
    </text>
    <line x1="20" y1="160" x2="580" y2="160" />
  </g>
  <rect id="kasten4" x="15" y="165" width="20" height="10" />
  <animate xlink:href="#kasten4"
    attributeName="x"
    begin="go.click" dur="10"
    values="15;565;15"
    keyTimes="0;.8;1"
    restart="whenNotActive"
    fill="freeze" />

<!-- kasten 5 -->
  <g>
    <text x="25" y="196">
      kasten 5:
      &#160;&#160;&#160;
      values 15;165;505;565;505;165;15
      calcMode discrete
    </text>
    <line x1="20" y1="200" x2="580" y2="200" />
  </g>
  <rect id="kasten5" x="15" y="205" width="20" height="10" />
  <animate xlink:href="#kasten5"
    attributeName="x"
    begin="go.click" dur="10"
    values="15;165;505;565;505;165;15"
    calcMode="discrete"
    restart="whenNotActive"
    fill="freeze" />

<!-- START/RESTART-Button -->
  <g id="go">
    <rect x="15" y="255" width="60" height="20" />
    <text id="rs" x="18" y="270"
      opacity="0">
      RESTART
    </text>
    <text id="s" x="27" y="270">
      START
    </text>
  </g>
  <animate xlink:href="#s"
    attributeName="opacity"
    begin="go.click" dur="10"
    values="1;.9;.1;0"
    keyTimes="0;.4;.6;1"
    restart="never"
    fill="freeze" />
  <animate xlink:href="#rs"
    attributeName="opacity"
    begin="go.click" dur="10"
    values="0;.1;.9;1"
    keyTimes="0;.4;.6;1"
    restart="never"
    fill="freeze" />
</svg>
      

Die 6 Animationen im obigen Beispiel verdeutlichen den Gebrauch der Attribute by, values, keyTimes und calcMode.
Alle Animationen werden durch das Event click auf das Objekt "go", den START/RESTART Button, ausgelöst und haben jeweils eine Gesamtspieldauer von 10 Sekunden, was mittels des Attributs dur definiert ist.
Die Animation der Kästen kann nach Beendigung erneut gestartet werden, die Animation des Button kann nicht wieder gestartet werden (außer nach einem erneuten Laden der Seite). Hierfür ist die Verwendung von restart mit den Werten whenNotActive bzw. never verantwortlich.
Durch Verwendung des speziellen Attributes fill und dem Wert freeze, ist für alle Animationen das letzte Bild der Animation als Endbild festgelegt.

Die Animation kasten 1 erhält den absoluten Startwert (15) durch die Verwendung von begin und ihren absoluten Endwert (565) durch das Attribut to.

Die Animation kasten 2 erhält den absoluten Startwert (15) ebenfalls durch begin, der Endwert wird jedoch durch die Verwendung von by festgelegt.
Der für by angegebene Wert (550) wird relativ zum Startwert interpretiert. Das bedeutet, dass dieser Wert zum Startwert addiert wird und auf diese Art den absoluten Endpunkt bestimmt: (Startwert) 15 + (by-Wert) 550 = (Endwert) 565

Für die Animation kasten 3 wird das Attribut values verwendet, um die Werte für die Zieleigenschaft festzulegen.
Mit diesem Attribut ist es möglich, mehrere Werte anzugeben. Dabei ist der erste Wert, der durch Semikolon getrennten Liste, der Startwert (15) und der letzte Wert der Liste der Endwert (15). Dazwischen können beliebig viele Zwischenwerte angegeben werden. In diesem Beispiel ist es allerdings nur einer (565). So ist es möglich den Kasten an der Linie hin und her wanderen zu lassen.

Die Animation kasten 4 ist bis auf die zusätzliche Verwendung des Attributs keyTimes mit der Animation kasten 3 identisch.
Das Attribut keyTimes hat als Wert eine Liste von relativen Werten, die sich auf die Gesamtabspieldauer (10 Sekunden) der Animation beziehen. Daher werden die einzelnen Werte entweder von 0 bis 1 oder von 0% bis 100% angegeben. Die Anzahl der Werte muß mit der Anzahl der Werte von values übereinstimmen, da sich jeder einzelne Wert von keyTimes auf den gleichplatzierten Wert von values bezieht.
Im Beispiel ist dem Attribut values eine Liste von 3 Werten (15;565;15) zugeordnet, daher hat auch das Attribut keyTimes 3 Werte in der seiner Liste (0;.8;1). Der erste Wert dieser Liste ist immer die Startzeit 0 (Beginn der Gesamtspieldauer), der letzte Wert dieser Liste immer der Endwert 1 (Ende der Gesamtspieldauer). Der Wert oder die Werte dazwischen gibt/geben eine relative Zeitdauer an. In unserem Beispiel ist es nur ein Wert (.8 oder 80%).
Die Animation beginnt also bei 0 Sekunden: der Kasten befindet sich auf der x-Koordinate (15). Nach 8 Zehnteln oder 80% der Gesamtzeit, also nach 8 Sekunden, hat der Kasten die Koordinate (565) erreicht. In der restlichen Zeit, also den letzten 2 Sekunden, bewegt sich der Kasten wieder zum Endpunkt der Animation hin (15), den er am Ende der Animation erreicht hat.

Die Animation kasten 5 zeigt die Verwendung von calcMode und dem Wert discrete. Die in values angegebenen Werte werden nicht fließend, sondern sprunghaft erreicht. Der Kasten hüpft von Wert zu Wert.

Die letzte Animation go ändert die Button-Beschriftung nur beim ersten click. Dazu wird die Eigenschaft opacity in zwei Text-Elementen geändert (von 1 auf 0 und von 0 auf 1). Die Werteveränderung wird durch values und keyTimes näher bestimmt.