SVG Tutorial

Durch die Verwendung des Elements animate ist es möglich genau einen Wert eines Attributs oder einer Eigenschaft innerhalb eines bestimmten Zeitablaufs zu verändern.

Das Element, dessen Attributwert geändert werden soll, kann vom animate-Element durch das Attribut xlink:href referenziert werden. Das setzt voraus, dass das zu animierende Element oder Objekt mittels des id-Attributs eindeutig identifizierbar ist.

Eine zweite Möglichkeit besteht darin, das animate-Element innerhalb des zu animierenden Elements zu platzieren. Dazu werden die entsprechenden Elemente mit öffnendem und schließendem Tag, und nicht wie sonst üblich als leeres Element, verwendet (z.B. statt <rect /> verwenden Sie jetzt <rect> .. Bereich für animate .. </rect>).

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="300" height="200"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Das animate-Element</title>
<desc>Attribut- oder Eigenschaftswerte
zeitgesteuert mit dem animate-Element animieren</desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:36px;
            font-weight:bold; fill:limegreen; stroke:black;}
      ellipse {stroke:black;}
    ]]>
    </style>
  </defs>

  <ellipse id="elli" cx="100" cy="100" rx="48" ry="90"
    style="fill:limegreen;" />
  <animate xlink:href="#elli"
    attributeType="XML" attributeName="rx"
    begin="0s" dur="6s"
    from="48" to="198"
    fill="freeze" />

  <ellipse cx="200" cy="100" rx="48" ry="90"
    style="fill:whitesmoke;">
    <animate
      attributeType="XML" attributeName="rx"
      begin="3s" dur="6s"
      from="48" to="198"
      fill="freeze"  />
  </ellipse>

  <text id="tx" x="20" y="115">SVG animate</text>
  <animate xlink:href="#tx"
    attributeName="opacity"
    begin="0s" dur="9s"
    from="0" to="1"
    fill="freeze" />
</svg>
      

Im obigen Beispiel werden 2 Ellipsen durch die Veränderung ihrer Eigenschaft rx (ihrem Radius zu x-Achse) und ein Text durch Veränderung seiner Eigenschaft opacity (seiner Durchsichtigkeit) animiert. Beachten Sie, dass die Eigenschaft opacity im text-Element nicht ausdrücklich gesetzt ist - das ist auch nicht notwendig.

Die erste, grüne Ellipse wird über Ihre ID vom animate-Element referenziert. Die zweite, "weißrauch"-ige Ellipse beinhaltet das animate-Element als Kind-Element. Der Text wird wieder über seine ID referenziert.

Über die Attribute attributeName und attributeType wird die zu änderende Eigenschaft ausgewählt. Mit Hilfe des Attributs begin legen Sie den Startpunkt der Animation fest, das Attribut dur (duration) bestimmt die Dauer der Animation. Um die Werte der Eingenschaft zu verändern werden die Attribute from und to verwendet, die den Anfangswert und den Endwert für die Eigenschaft festlegen. Das Attribut fill hat in Animationselementen eine besondere Bedeutung. Hiermit wird festgelegt, ob am Ende der Animation das Element mit dem Anfangswert oder dem Endwert für die Eigenschaft angezeigt werden soll.

Da für alle Animationselemente von SVG nahezu die selben Attribute oder Eigenschaften zu verwendet werden können, ist eine detaillierte Übersicht der wichtigsten Attribute, ihrer Bedeutung und Verwendung, ihrer möglichen Werte und dem jeweiligen voreingestellten Wert in den folgenden 4 Kapiteln zu finden.