9.9Externe Elemente animieren

Neben grafischen Objekten, die als Subelement einen Animationstyp besitzen, können mit Hilfe des schon bekannten xlink:href-Attributs auch externe Elemente einer SVG-Grafik animiert werden. Die Animation bleibt dabei zwar ein Subelement, jedoch ändert sie nicht die Eigenschaften ihres Elternelements, sondern die des referenzierten Elements.

 Listing 9-14 demonstriert die Animation eines externen Elements. Das Beispiel beinhaltet einen Text mit zwei Animationen und einen Kreis. Die erste Animation ändert die Farbe des Kreises von rot nach grün, sobald sich der Mauszeiger über dem Text befindet. Verläßt der Zeiger den Text wieder, setzt die zweite Animation die Farbe des Kreises auf das ursprüngliche Rot zurück.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <text x="75" y="40" text-anchor="middle" fill="#000" font-size="18px">
    <set xlink:href="#extern" attributeName="fill" begin="mouseover" to="#0F0" />
    <set xlink:href="#extern" attributeName="fill" begin="mouseout" to="#F00" />
    Touch me!
  </text>
  <circle id="extern" cx="75" cy="75" r="25" fill="#F00" />
</svg>