XML-Technologien / SVG / Grafiken mit externen Skripten manipulieren / Lösungen

Lösungen zu Grafiken mit externen Skripten manipulieren

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

Um mit der setInterval-Methode des window-Objekts einen Timer realisieren zu können, muss auf Skriptebene außerhalb einer Funktion in der SVG-Datei die aufzurufende Funktion definiert werden. Dazu ist folgende Syntax erforderlich: window.funktionsname=funktionsname;
Zur Definition der Anzeige 00:00:00 ist folgender Code in der SVG-Datei erforderlich. Die Formatierung spielt selbstverständlich keine Rolle:

<text id="uhrzeit" x="10" y="50" style="font-size:36px">00:00:00</text>

Eine Funktion, die die aktuelle Uhrzeit ermittelt und anzeigt, könnte wie folgt lauten:

<svg width="200px" height="100px" onload="initUhr(evt)">
  <script type="text/ecmascript">
    <![CDATA[
      var svgdok;
      var elem;
      var zeit;
      window.neueZeit=neueZeit;
      function initUhr(evt)
      {
        svgdok=evt.getTarget().getOwnerDocument();
      }
      function neueZeit()
      {
        var zeit= new Date();
        var stunden=zeit.getHours();
        var minuten=zeit.getMinutes();
        var sekunden=zeit.getSeconds();
        zeitTxt=stunden +":"+minuten+":"+sekunden;
        elem=svgdok.getElementById("uhrzeit");
        elem.firstChild.setNodeValue(zeitTxt);
      }
    ]]>
  </script>

Um die Funktion jede Sekunde einmal aufzurufen, müssen Sie die setInterval-Methode verwenden.

window.neueZeit=neueZeit;
function initUhr(evt)
{
  svgdok=evt.getTarget().getOwnerDocument();
  setInterval('neueZeit()',1000);
}

Um die Minuten, Sekunden und Stunden immer zweistellig anzuzeigen, müssen Sie die Funktion neueZeit um drei if-Anweisungen ergänzen.

function neueZeit()
{
  var zeit= new Date();
  var stunden=zeit.getHours();
  var minuten=zeit.getMinutes();
  var sekunden=zeit.getSeconds();
  if (stunden<10){eval("stunden='0' +stunden")};
  if (minuten<10){eval("minuten='0' +minuten")};
  if (sekunden<10){eval("sekunden='0' +sekunden")};
  zeitTxt=stunden +":"+minuten+":"+sekunden;
  elem=svgdok.getElementById("uhrzeit");
  elem.firstChild.setNodeValue(zeitTxt); 
}

Um die Grafik in eine HTML-Seite einzufügen, verwenden Sie den <EMBED>-Tag:

<embed src="KAP11.svg" width="200" height="100" type="image/svg+xml" id="Uhr"/>

<< zurück

vor >>

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

XSLT

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