Skripte

Eine SVG-Grafik können Sie über ein Skript (im Regelfall JavaScript) dynamisieren (z. B. zur Bewegung oder Benutzerinteraktion). Der Skriptcode wird dazu, wie auch in HTML, zwischen den script-Tags notiert.

Als Schnittstelle zwischen dem Dokument unter dem Skript wird das DOM (Document Object Model) verwendet. Des Weiteren steht auch das BOM (Browser Object Model) zur Verfügung. Dadurch ist die grundlegende Verwendung der document- und window-Objekte gleich, wie wenn man JavaScript für HTML verwendet.

Um auf Benutzeraktionen (z. B. ein Klicken) zu reagieren, stehen uns natürlich einige Events zur Verfügung. Dazu zählen unter anderem click (klicken), mousedown (Maustaste gedrückt), mouseup (Maustaste losgelassen), mousemove (Maus bewegt) und mouseout (Maus verlässt das Element). Möchten Sie einem Element ein Ereignis zuordnen, so verwenden Sie als Attribut die Kombination aus dem Schlüsselwort on und dem Eventnamen.

Im folgenden Beispiel sehen Sie eine Analoguhr. Die Uhr wird automatisch gestartet und zeigt dann die aktuelle Uhrzeit. Sobald Sie auf die Uhr klicken, wird die Uhr angehalten. Ein weiterer Klick würde die Uhr wieder starten.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <script type="text/javascript">
    var bClockRunning = false;
    var hIntv = null;
    
    function StartStopClock()
    {
        // Uhr-Intervall starten oder stoppen
        if (!bClockRunning)
            hIntv = window.setInterval(SetClock, 1000);
        else
            window.clearInterval(hIntv);
        // Bit umkehren
        bClockRunning = !bClockRunning;
    }
    
    function SetClock()
    {
        var dt = new Date();
        document.getElementById("stunde").setAttribute("transform", "rotate(" + ((dt.getHours() % 12) * 30) + " 300 200)");
        document.getElementById("minute").setAttribute("transform", "rotate(" + (dt.getMinutes() * 6) + " 300 200)");
        document.getElementById("sekunde").setAttribute("transform", "rotate(" + (dt.getSeconds() * 6) + " 300 200)");
    }
    
    // Uhr starten
    StartStopClock();
    </script>
    <circle cx="300" cy="200" r="150" fill="silver" onclick="StartStopClock()" />
    <line id="stunde" x1="300" y1="80" x2="300" y2="200" stroke="black" stroke-width="8" />
    <line id="minute" x1="300" y1="60" x2="300" y2="200" stroke="black" stroke-width="3" />
    <line id="sekunde" x1="300" y1="60" x2="300" y2="200" stroke="red" stroke-width="1" />
    <circle cx="300" cy="200" r="8" fill="red" />
</svg>

Möchten Sie das Skript lieber in einer externen Datei notieren, so können Sie das Skript auch über das href-Attribut des XLink-Namensraums einbinden:

<script type="text/javascript" xlink:href="skript.js"></script>