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);
}
<embed src="KAP11.svg" width="200" height="100" type="image/svg+xml" id="Uhr"/>
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