|
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>
| 
