Interaktion zwischen SVG und der HTML-Seite

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Leider bietet SVG nicht alles, was Sie von JavaScript in HTML-Seiten gewohnt sind. Es gibt bspw. keinen Timer, wie ihn die Methoden setInterval und setTimeout des window-Objekts implementieren. Das hindert Sie daran, bspw. Animationen oder Uhren zu programmieren, die ein bestimmtes Zeitintervall benötigen. Es gibt aber natürlich dennoch eine Möglichkeit. Sie können nämlich innerhalb einer SVG-Grafik auch die Methoden und Eigenschaften des window-Objekts des Browsers nutzen.

Hinweis:
Das setzt voraus, dass die SVG-Grafik auch in einem Browser angezeigt wird. Wenn Sie die SVG-Grafik bspw. innerhalb einer VB-Anwendung in einem ActiveX-Steuerelement anzeigen lassen, steht das window-Objekt und damit dessen Methoden nicht zur Verfügung.

Wie das funktioniert, soll an einer analogen Uhr verdeutlicht werden.

Eine analoge Uhr mit Hilfe eines Timers

Abbildung: Eine analoge Uhr mit Hilfe eines Timers.

Aufbau der Uhr

Die Uhr selbst ist eigentlich recht einfach aufgebaut. Sie besteht aus zwei Kreisen, einem äußeren mit 200 Pixeln Durchmesser und einem inneren mit 10 Pixeln Durchmesser. Die Striche und Zeiger werden jeweils durch senkrechte Linien realisiert, die über die rotate-Anweisung des transform-Attributs gedreht werden.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="200px" height="200px">
  <g transform="scale(0.5)">
    <g transform="translate(200,200)">
      <circle cx="0" cy="0" r="100" style="stroke:black;fill:orange;opacity:0.5"/>
      <line transform="rotate(0)" id="12uhr" x1="0" y1="-90" x2="0" y2="-100" style="stroke:black;stroke-width:3px"/>
      ...
      <line transform="rotate(90)" id="15uhr" x1="0" y1="-90" x2="0" y2="-100" style="stroke:black;stroke-width:3px"/>
      ...
      <line transform="rotate(180)" id="18uhr" x1="0" y1="-90" x2="0" y2="-100" style="stroke:black;stroke-width:3px"/>
      ...
      <line transform="rotate(270)" id="21uhr" x1="0" y1="-90" x2="0" y2="-100" style="stroke:black;stroke-width:3px"/>
      ...
      <line transform="rotate(0)" id="sekzeiger" x1="0" y1="0" x2="0" y2="-100" style="stroke:red;stroke-width:1px"/>
      <line transform="rotate(0)" id="minzeiger" x1="0" y1="0" x2="0" y2="-90" style="stroke:black;stroke-width:2px"/>
      <line transform="rotate(0)" id="stdzeiger" x1="0" y1="0" x2="0" y2="-60" style="stroke:darkorange;stroke-width:4px"/>
      <circle cx="0" cy="0" r="5" style="stroke:black;fill:black"/>
    </g>
  </g>
</svg>

Realisieren der Zeigerbewegung mit Hilfe des Timers

Die Zeigerbewegung zu realisieren ist eigentlich ganz einfach. Eine Minute hat 60 Sekunden und eine Stunde 60 Minuten. Da ein Kreis 360° hat, muss der Minuten und Sekundenzeiger für jede Minute bzw. Sekunde um 6° gedreht werden. Da analoge Uhren 12 Stunden anzeigen, muss der Stundenzeiger jede Stunde um 30° gedreht werden. Damit aber nicht erst nach einer vollen Stunde eine Bewegung sichtbar ist, sollten Sie den Stundenzeiger jede Minute um 0.5° drehen.

Voraussetzung für die Drehungen ist, dass die Zeiger im Nullpunkt des Koordinatensystems beginnen. Dazu werden sie in eine Gruppe eingefasst, die zum Punkt 200/200 verschoben wird.

Nun fehlt im Prinzip nur noch der Code. Er wird wieder in einem <script>-Tag definiert. Außerhalb der Funktionen werden die benötigten Variablen definiert. Dies sind die Variablen elem und svgdok. Daneben müssen Sie außerhalb der Funktionen aber auch dafür sorgen, dass Ihnen die setInterval-Methode zur Verfügung steht.

Dazu fügen Sie die Anweisung

window.neueZeitanal=neueZeitanal;

ein. Sie sorgt dafür, dass dem window-Objekt die Funktion neueZeitanal bekannt gemacht wird, die ja in der SVG-Datei definiert ist, aber von einer Methode des externen window-Objekts aufgerufen werden soll. Innerhalb der Skripte können Sie dann die Funktion neueZeitanal über die setInterval-Methode aufrufen. Im Beispiel passiert das alle 1000 Millisekunden, also jede Sekunde einmal. Der erste Aufruf der Funktion nach Initialisieren der Variablen svgdok sorgt dafür, dass unmittelbar nach dem Laden der Grafik die Anfangszeit gesetzt wird, ansonsten würde dies erst mit einer Sekunde Verzögerung passieren, was sehr unschön aussieht. Innerhalb der Funktion müssen Sie dann nur noch die Zeiger entsprechend bewegen, indem Sie die rotate-Anweisung mit neuen Parametern versehen.

<svg width="200px" height="200px" onload="initUhr(evt)">
  <script type="text/ecmascript">
    <![CDATA[
      var svgdok;
      var elem;
      window.neueZeitanal=neueZeitanal;

      function initUhr(evt)
      {
        svgdok=evt.getTarget().getOwnerDocument();
        neueZeitanal();
        setInterval('neueZeitanal()',1000);
      }
    
      function neueZeitanal()
      {
        var zeit= new Date();
        var stunden=zeit.getHours();
        var minuten=zeit.getMinutes();
        var sekunden=zeit.getSeconds();
        var stundengrad;
        if (stunden>=12){stunden=stunden-12};
        elem=svgdok.getElementById("sekzeiger");
        elem.setAttribute("transform","rotate("+6*sekunden+")");
        elem=svgdok.getElementById("minzeiger");
        elem.setAttribute("transform","rotate("+6*minuten+")"); 
        elem=svgdok.getElementById("stdzeiger");
        stundengrad=(30*stunden)+(0.5*minuten);
        elem.setAttribute("transform","rotate("+stundengrad+")");
      }
    ]]>
  </script>

Hinweis:
Wenn Sie in einer HTML-Seite mehrere SVG-Grafiken verwenden, die auf diese Weise einen Timer nutzen, müssen Sie die durch den Timer aufgerufenen Funktionen unterschiedlich nennen, weil der Browser sonst nicht unterscheiden kann, welche der beiden gleich benannten Funktionen gemeint ist.

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de