Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 16   

16.2 Skriptsprachen einbinden - das script-Element

Skriptanweisungen werden innerhalb des defs-Container mit dem script-Element eingeleitet (ähnlich zu HTML). Mit dem Attribut type muß der MIME-Typ der verwendeten Skriptsprache angegeben werden. Die Skriptsprache JavaScript wird durch den MIME-Type text/javascript eindeutig identifiziert.

Vor der eigentlichen Notierung der Skriptanweisungen muß (genau wie bei der Definiton von Style-Vorschriften mit dem style-Element) ein CDATA-Bereich definiert werden. Laut XML Spezifikation werden Daten innerhalb eines CDATA-Bereichs von der interpretierenden Anwendungssoftware nicht als XML-Code interpretiert.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="130px" height="62x"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das script-Element</title>
  <desc>
    Javascript und SVG. Skriptanweisungen durch das
    script-Element in SVG Dokumente einbinden.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript">
    <![CDATA[
      function meldung(){
        alert("Javascript in SVG");
      }
    ]]>
    </script>

<!-- der Style Bereich -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
      rect {fill:#33cc33; stroke:black;}
    ]]>
    </style>
<!-- der button -->
    <g id="button">
      <rect x="0" y="0" width="100" height="30" rx="5" ry="5" />
      <text x="18" y="20">onclick</text>
    </g>
  </defs>

<!-- button-Instanz mit Event-Attribut onclick;
     ruft bei Klick die JavaSriptfunktion meldung() auf -->
  <use xlink:href="#button" x="15" y="15" onclick="meldung();" />
</svg>
      

Im obigen Beispiel wird im defs-Bereich ein script-Element definiert, das eine JavaScript-Funktion des Namens meldung() beinhaltet. Diese Funktion besteht nur aus einer Anweisung: der Ausgabe eines sogenannten alert-Fensters mit etwas Text.

Die durch das use-Element eingebundene Instanz des SVG Objekts button, ruft bei einem Klick-Ereignis diese JavaScript-Funktion auf - bewirkt durch das Event-Attribut onclick, dem als Wert der Aufruf der Funktion zugeordnet wird.

Sie können JavaScript-Anweisungen auch in eine externe Datei mit der Dateinamenerweiterung .js auslagern. Diese Datei wird dann durch das Attribut xlink:href innerhalb des script-Elements referenziert.
Das folgende Beispiel ist mit dem vorangegangem identisch. Nur wird hier die Funktion meldung() in einer externen Datei namens meldung.js definiert. Diese Datei wird durch das script-Element in das SVG Dokument eingebunden, d.h. die Funktion steht innerhalb des Dokumentes zur Verfügung.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="130px" height="62x"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das script-Element</title>
  <desc>
    Javascript und SVG. Skriptanweisungen durch das
    script-Element in SVG Dokumente einbinden.
  </desc>
  <defs>
<!-- der Script Bereich -->
    <script type="text/javascript" xlink:href="meldung.js" />

<!-- der Style Bereich -->
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
      rect {fill:#33cc33; stroke:black;}
    ]]>
    </style>
<!-- der button -->
    <g id="button">
      <rect x="0" y="0" width="100" height="30" rx="5" ry="5" />
      <text x="18" y="20">onclick</text>
    </g>
  </defs>

<!-- button-Instanz mit Event-Attribut onclick;
     ruft bei Klick die JavaSriptfunktion meldung()
     aus der Datei meldung.js auf -->
  <use xlink:href="#button" x="15" y="15" onclick="meldung();" />
</svg>
      



index  |  Kapitel 16  |  16.1  <<  | 16.2 |  >>  16.3   SVG Inhalte verfuegbar machen