Animationen mit SVG

Animation

ID

"IDentifikation"
Animationen lassen sich in SVG einfach mit extra Elementen wie z.b.animate um ein Element zu animieren muss man ihm eine ID mit dem Attributid="" zuweisen. Entweder man verwenden nun das Elementanimate oder eine Programmiersprache, meist Java Script, um ein Element zuverändern. Ich werde in meinen Beispiel das Elementanimate verwenden. Das ganze hat nur einen Haken Animationen werden von den Browsern nur teilweise unterstützt Firefox stellt sie momentan gar nicht dar Opera und der Adobe SVG viewer™ lassen die Prozessorauslastung auf 100% ansteigen.

Ein Beispiel

Mit demtext Element erzeuge ich den Text: SVG. 
 <text x="300" y="700" fill="url(#verlauf)" font-size="250px">
                SVG
              </text>
Diesen fülle ich mit einem Verlauf 
 <linearGradient id="verlauf">
              <stop offset="0" stop-color="#ff0000" />
              <stop id="m" offset=".50" stop-color="#ffff00" />
              <stop offset="1" stop-color="#0000ff" />
             </linearGradient>
rot - gelb - blau. Das zweitestop Element hat schon dasid="m" Attribut. Diesesstop Element mit der IDid="m" werden wir nun animieren. Dazu verwenden wir das Elementanimate.
Die Attribute vonanimate
xlink:href="#m"
verweist auf das zu animierende Element in unserem Fall das Element mit der ID m
attributeName="offset"
hier wird angeben welches Attribut geändeert werden soll.
attributeType="XML"
die Art des Attributs SVG ist XML also XML
from="0"
der Startwert damit beginnt die Animation
to="1"
der Endwert bei uns soll sich der gelbe teil des Verlaufs vom linken zum Rechten Rand des Textes bewegen also von 0 (Startwert) zu 1(Endwert)
dur="3s"
Dauer der Animation 3 Sekunden
repeatDur="indefinite"
Wiederholung der Animation unendlich

Der Quellcode vonanimate:

 <animate xlink:href="#m"
  attributeName="offset"
  attributeType="XML"
  from="0"
  to="1"
  dur="3s"
  repeatDur="indefinite" />

Der gesamte Beispielquellcode 

 <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg width="300px" height="100px" viewBox="0 0 1000 1000" 
  xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Animation von Text</title> 
 <defs>
      <linearGradient id="verlauf">
        <stop offset="0" stop-color="#ff0000" />
        <stop id="m" offset=".50" stop-color="#ffff00" />
        <stop offset="1" stop-color="#0000ff" />
      </linearGradient>
    </defs>
    <text x="300" y="700" fill="url(#verlauf)" font-size="250px">
           SVG</text>
 <animate xlink:href="#m"
  attributeName="offset"
  attributeType="XML"
  from="0"
  to="1"
  dur="3s"
  repeatDur="indefinite" /> 
</svg>
Das Ganze in Aktion. Am besten mit Opera anzeigen lassen.

enü