SVG/ Skripte
[Bearbeiten] Skripte und Programme
Beim Zusammenspiel von SVG mit Skripten oder Programmen sind verschiedene Typen von Skripten oder Programme zu unterscheiden.
Zunächst gibt es jene Programme, welche ein SVG-Dokument präsentieren sollen, also graphisch darstellen, drucken, vorlesen etc. Dies sind die Darstellungsprogramme, von denen bislang in diesem Buch die Rede war. Diese Programme benötigen korrekte SVG-Dokumente als Eingabe und die korrekte Präsentation ist in den Empfehlungen zu SVG festgelegt.
Dann gibt es Skripte oder Programme, welche von einem Format in ein anderes konvertieren können. Diese benötigen korrekte Dokumente in einem Format als Eingabe und haben die Aufgabe, korrekte Dokumente in einem anderen Format wieder auszugeben. Bei einer Optimierung kann das Ein- und Ausgabeformat auch das gleiche sein. Die Interaktion mit dem Benutzer ist zumeist auf definierte Eingabeparameter begrenzt. Einige dieser Programme sind auch interaktiv und fragen während des Programmablaufes Parameter ab oder werden mit Steuerdateien beeinflusst.
Ferner gibt es Dienstprogramme (englisch: server).
Wird an diese eine Anfrage gestellt, kann eine Verarbeitung mit einer Ausgabe die Folge sein. Zum Beispiel liefern webserver bei Anfragen gemäß dem Protokoll HTTP (Hypertext-Transfer-Protokoll) Dokumente oder allgemeiner Ausgaben aus.
Von so einem webserver können wiederum Skripte abgefragt werden (PHP - Hypertext-Präprozessor; Perl etc), diese werden dann ausgeführt und produzieren eine Ausgabe.
Zurückgegeben wird also nicht das Skript selbst, sondern dessen Ausgabe.
Im Falle von SVG ist das in der Regel ein komplettes SVG-Dokument, welches ganz oder teilweise gemäß der Anfrage dynamisch erstellt wurde.
Solche Skripte oder Programme werden auch server-seitige Skripte genannt.
Die funktionieren unabhängig von den Möglichkeiten des Darstellungsprogrammes. Erforderlich ist nur eine Anfrage an das Dienstprogramm.
Das Skript erzeugt dann zumeist ein komplettes SVG-Dokument (oder ein Dokument in einem anderen Format).
Das Darstellungsprogramm interpretiert nur die Ausgabe, insofern ist eine klare zeitliche und inhaltliche Aufgabetrennung zwischen dem Skript und dem Darstellungsprogramm gegeben.
Entsprechend sind die Interaktionsmöglichkeiten des Nutzers mit dem Skript begrenzt. Eine Interaktion erfordert eine erneute Anfrage an das Dienstprogramm und einen erneuten Durchlauf des Skriptes.
Für die Darstellung ist es dafür allerdings belanglos, welche Skript- oder Programmiersprache verwendet wird. Das Skript oder Programm muss nur in der Lage sein, eine Textausgabe zu erzeugen, die ein korrektes SVG-Dokument ergibt. Die Funktion des Skriptes ist also unabhängig vom Darstellungsprogramm und von dessen Einstellungen und Möglichkeiten, was ein großer Vorteil für den Autor ist, der so die komplette Kontrolle über das Skript und dessen Ausführung behält. Sicherheits- oder technische Mängel des Skriptes stellen andererseits kein dramatisches Problem für den Nutzer der Ausgabe dar. Schlimmstenfalls kommt die Ausgabe nicht oder nicht korrekt zustande.
Bezogen auf dieses Buch sind die zuvor beschriebenen Programme jenseits des Themas dieses Buches und werden nicht weiter diskutiert, eben weil sie unabhängig von den Gegegebenheiten von SVG funktionieren und das SVG-Darstellungsprogramm unabhängig von ihnen funktioniert. Sie können unbedenklich von Autoren eingesetzt werden.
Zusätzlich gibt es in der Voll- und in der Basisversion von SVG 1.1 und in SVG tiny 1.2 auch die Möglichkeit, dass das Darstellungsprogramm selbst Skripte ausführt. Dies ist in SVG tiny 1.1 ausgeschlossen. Diese Skripte werden anwenderseitige Skripte bezeichnet und sind entweder direkt im SVG-Dokument notiert oder im SVG-Dokument wird das Skript referenziert. Nur um solche Skripte geht es im folgenden Abschnitt dieses Kapitels.
[Bearbeiten] Im Darstellungsprogramm ausführbare Skriptsprachen
Neben der eigentlichen Darstellung des SVG-Inhaltes kann ein Darstellungsprogramm auch zusätzlich die Fähigkeit haben, Skriptsprachen zu interpretieren. Ob ein im Dokument befindliches Skript ausgeführt wird, hängt von der verwendeten Skriptsprache, vom Darstellungsprogramm und dessen Fähigkeiten ab und davon, was der Nutzer des Darstellungsprogrammes für Voreinstellungen vorgenommen hat. Weil auch nicht jedes Darstellungsprogramm jede geeignete Skriptsprache interpretiert und der Nutzer die Interpretation per Voreinstellung unterbinden oder erlauben kann, kann sich der Autor nie darauf verlassen, dass ein Skript wirklich wie geplant ausgeführt wird.
SVG selbst sieht keine Skriptsprache vor, welche von einem Darstellungsprogramm interpretiert werden muss. Allerdings definiert SVG ein Dokument-Objekt-Modell, in welchem die Skriptsprache agieren kann. Häufig implementiert sind unterschiedliche Umsetzungen des Standards ecmascript (von Ecma International standartisiertes JavaScript).
Allerdings werden anwenderseitige Skripte gegebenenfalls während der Darstellung des Dokumentes ausgeführt, was eine permanente Interaktion des Nutzers mit dem Dokument ermöglicht. SVG bietet dafür Schnittstellen, um Nutzerinteraktionen und Ereignisse auszuwerten und darauf zu reagieren. Komplexere Skripte können sogar mit Dienstprogrammen über das internet interagieren (Stichwort: AJAX; englisch: Asynchronous JavaScript and XML).
Weil die Skripte im Darstellungsprogramm des Nutzers auf dessen Rechner laufen, trägt dieser auch das Risiko bei technischen Mängeln und bei Sicherheitsmängeln des Skriptes oder des Darstellungsprogrammes. Je nach Skriptsprache oder Umsetzung der Skriptsprache besteht auch die Möglichkeit, Informationen vom Rechner des Nutzers auszuwerten.
Durch die AJAX-Interaktionsmöglichkeit ergibt sich weiterhin das Potential, dass die Daten vom Nutzer unbemerkt zu anderen Rechnern weitergeleitet werden.
Zwar sind sich die Anbieter der Darstellungsprogramme dessen bewusst und setzen Konzepte um, um ein unbemerktes Versenden brisanter Informationen zu verhindern, auch werden die Sprachen so konstruiert, um solche zweifelhaften Anwendungen weitgehend auszuschließen. Allerdings hat die bisherige Historie der konkreten Umsetzung anwenderseitiger Skriptsprachen bislang gezeigt, dass immer wieder unbeabsichtigte Sicherheitslecks auftreten. Das Sicherheitsrisiko trägt also letztlich der Nutzer, welcher die Interpretation von Skripten erlaubt.
Das technische Risiko von anwenderseitigen Skripten liegt darin, dass schlecht oder fehlerhaft geschriebene Skripte oder eine eventuell beim Darstellungsprogramm ineffektive Umsetzung der Skriptinterpretation zu einer starken Belastung des Prozessors des Rechners des Nutzers führen kann - oder auch zum Einfrieren oder zum Absturz des Darstellungsprogrammes. Weil der Nutzer die Qualität der Skripte beim Aufruf unbekannter Dokumente im vorhinein nicht beurteilen kann, kann dies ein weiterer Grund sein, dass Nutzer die Interpretation von Skripten nicht erlauben, ebenso wie die gegebenenfalls bekannte starke Prozessorbelastung bei ineffektiver Umsetzung der Skriptinterpretation oder die Tendenz zu Abstürzen.
[Bearbeiten] Zugänglichkeitsprobleme und Lösungsstrategie
Aus diesen Unwägbarkeiten, ob das Darstellungsprogramm das Skript interpretieren kann oder darf, ergibt sich für Dokumente mit Skripten ein Zugänglichkeitsproblem, dem sich der Autor des Dokumentes stellen muss, um Probleme zu vermeiden. Wäre Inhalt nur bei Skriptinterpretation verfügbar, so wäre dies eine Zugänglichkeitsbarriere, die zu vermeiden ist.
Die pauschale Lösung des Problems liegt darin, die komplette Information eines Dokumentes ohne die Notwendigkeit der Skriptinterpretation verfügbar zu machen. Zu diesem Zwecke erstellt der Autor zunächst das komplette Dokument mit der beabsichtigten Information ohne Skript. Dieses Dokument enthält dann per Definition die komplette Information, die mit dem Dokument vermittelt werden soll.
Wie dann anschließend mittels CSS eine alternative Ansicht des Dokumentes formuliert werden kann, so kann zusätzlich über anwenderseitige Skripte ein zusätzlicher alternativer Zugang zur Information des Dokumentes angeboten werden. Wie die Dekoration per CSS den Inhalt, die Information eines Dokumentes nicht ändert, so ändert auch die Ausführung eines Skriptes nicht den Inhalt oder die Information eines Dokumentes, ermöglicht nur einen anderen Zugang.
Mit diesem Ausgangspunkt kann ein Autor an sich durch Skripte keine Barrieren für Nutzer ohne Skriptinterpretation erstellen. Allenfalls handelt es sich um inhaltsleere Dokumente, bei denen Nutzern mit Skriptinterpretation Inhalt vorgetäuscht wird. Allerdings ergibt sich bei dieser Interpretation das Problem, dass Nutzer den vorgetäuschten Inhalt als abweichend vom wahren Inhalt und eventuell als nützlicher empfinden könnten, woraus sich dann doch wieder ein Zugänglichkeitsproblem zur Täuschung für jene ergibt, bei denen die Skripte nicht ausgeführt werden.
Neben der technischen Realisation der Skripte ist es also zentrale Aufgabe des Autors eines Dokumentes, welches anwenderseitige Skripte enthält, den Zugang zur Information unabhängig von der Skriptinterpretation bereitzustellen, um Missverständnisse und Barrieren zu vermeiden.
[Bearbeiten] Themeneingrenzung
Weil SVG selbst keine Skriptsprache vorsieht, welche interpretiert werden muss, ist das Erlernen von Skriptsprachen auch nicht Thema dieses Buches. SVG stellt jedoch Elemente, Schnittstellen und Methoden bereit, um Skripte einzubetten, zu referenzieren, auf Ereignisse zu reagieren und über das Dokument-Objekt-Modell die Struktur oder die Dekoration eines Dokumentes zu manipulieren.
In den Beispielen wird ecmascript verwendet. Eine konkrete Umsetzung davon ist java-script. Wikibooks hat auch ein Buch names Javascript, welches das Verständnis der Beispiele erleichtern kann, ebenso wie die Referenzen zum Dokument-Objekt-Modell am Endes dieses Kapitels.
Anders als in HTML, wo der Skriptautor zum Beispiel mit java-script noch Inhalte direkt in das Dokument schreiben konnte, erfolgt in SVG die Manipulation immer über das DOM, wobei es einerseits für XML ein generischen DOM für den allgemeinen Zugriff auf Attribute und Elemente und deren Inhalt gibt als auch für SVG 1.1 und SVG tiny 1.2 spezielle Konstruktionen, die den besonderen Anforderungen des Formates Rechnung tragen.
[Bearbeiten] Angaben zur verwendeten Skriptsprache
Die verwendete Skriptsprache kann explizit angegeben werden. Mit dem Attribut contentScriptType des Elementes svg kann dokumentweit notiert werden, welche Skriptsprache verwendet wird, wenn diese nicht lokal angegeben wird. Das Attribut ist bereits im Kapitel Dokumentstruktur im Abschnitt über das Element svg beschrieben worden. Der Wert von contentScriptType ist ein Medientyp (ehemals MIME-Typ). Typisch für Skripte innerhalb von SVG ist zum Beispiel 'application/ecmascript', was in SVG tiny 1.2 auch die Voreinstellung ist, wenn das Attribut nicht angegeben ist.
Zum Zeitpunkt, als SVG 1.1 spezifiziert wurde, hatte ecmascript noch keinen Medientyp. Statt 'application/ecmascript' wurde damals angenommen, dass der Medientyp 'text/ecmascript' heißen wird, was daher für SVG 1.1 die Voreinstellung ist. Es ist daher zum empfehlen, den Medientyp in SVG 1.1 immer explizit anzugeben, selbst wenn ecmascript verwendet wird.
Mit dem Attribut type kann ferner bei jedem Element, welches Skripte beinhalten kann, der Medientyp gesondert und gegebenenfalls auch abweichend von der globalen Angabe notiert werden. Der Wert ist auch jeweils ein Medientyp.
Beide Attribute sind nicht animierbar.
Durch bedingte Verarbeitung mit dem Element switch und dem Attribut requiredFormats in SVG tiny 1.2 kann ferner die Darstellung davon abhängig gemacht werden, ob eine Interpretation der verwendete Skriptsprache gegeben ist oder nicht.
Ferner kann mit dem Attribut requiredFeatures festgestellt werden, ob überhaupt eine Skriptinterpretation durchgeführt wird.
Durch die bedingte Verarbeitung ist es so möglich, verschiedene Skriptsprachen und skriptfreie Alternativen anzubieten.
[Bearbeiten] Element script
| SVG |  |
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|
| 1.1 | 1.7 | 9 | 3 | 3.2 | 4 | ? | ? | ? |
Das Element script kann ausführbaren Inhalt enthalten oder ausführbaren Inhalt referenzieren.
Das Skript wird gegebenenfalls ausgeführt, sobald das Element geladen ist.
Weil Skripte nicht direkt dargestellter Inhalt sind, empfiehlt es sich, script-Elemente im Element defs des Hauptelementes svg zu notieren.
Das Element entspricht dem gleichnamigen Element in XHTML. Man beachte, dass dieses anders als das gleichnamige Element in HTML zu interpretierenden Inhalt enthält. Wird das Skript als Elementinhalt notiert, so sind spezielle Zeichen von XML im Konfliktfalle folglich zu maskieren, insbesondere < als < und > als >. Alternativ kann der Inhalt als CDATA gekennzeichnet werden.
Neben dem bereits beschriebenen Attribut type stehen für script auch Attribute von XLink zur Verfügung. Insbesondere dient href dazu, ein externes Skript zu referenzieren. Sofern href von XLink angegeben ist, wird gegebenenfalls vorhandener Inhalt von script ignoriert und nicht ausgeführt, gegebenenfalls nur der das referenzierte externe Skript. Ist die angegeben IRI ungültig, wird kein Skript ausgeführt.
Kompilierte Skripte/Programme, wie etwa java-Programme (JAR-Archiv) sind immer zu referenzierten und nicht im Element zu notieren.
href ist für das Element script nicht animierbar.
Beispiel, Skript direkt eingebettet:
<script type="application/ecmascript"> // Skriptquelltext < > etc <script>
oder:
<script type="application/ecmascript"> <![CDATA[ // Skriptquelltext < > etc ]]> <script>
Oder es wird auf ein externes Dokument verwiesen:
<script type="application/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="scripts/meinScript.js"/>
Oder:
<script type="application/java-archive" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="java/Beispiel.jar"/>
Sofern der Namensraum für XLink bereits bei einem Elternelement angegeben ist, ist dies natürlich nicht abernals notwendig.
[Bearbeiten] Ereignisbehandlung in SVG 1.1
In SVG 1.1 basiert die Ereignisbehandlung in Verbindung mit Skripten einerseits auch DOM2-Ereignissen und auf speziellen Attributen. Die Attribute dienen als Empfänger von Ereignissen und damit als Schnittstelle zwischen dem Dokument und der Skriptsprache.
Die Attribute sind onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout und onload. Die zugehörigen Ereignissnamen ergeben sich, wenn das vorangestellte 'on' entfernt wird. Zusätzlich sind Dokumentereignisse nutzbar. Dieses sind onunload, onabort, onerror, onresize, onscroll, onzoom. Die Attribute sind anwendbar auf graphische Elemente und Gruppierungselemente.
Eine genauere Beschreibung des jeweiligen Ereignisses ist im Kapitel Interaktivität zu finden.
Ferner gibt es Attribute bezogen auf Animationselemente. Dies sind: onbegin, onend, onrepeat. Die beziehen sich entsprechend auf den Beginn, das Ende, die Wiederholung einer Animation, ebenfalls wie für die entsprechenden Ereignisse im Kapitel Interaktivität beschrieben.
Die Attribute sind nicht animierbar.
Das jeweilige Attribut wird bei dem Element notiert, bei welchem das Ereignis registriert werden soll.
Der Wert eines Attributes ist ein Skript, welches beim Eintreten eines Ereignisses ausgeführt werden soll, oft nur ein Funktionsaufruf samt Parameter für eine Funktion, welche im Element script zu definieren ist, siehe Beispiele unten. Auch hier ist darauf zu achten, dass spezielle XML-Zeichen maskiert werden, insbesondere neben den Zeichen < und > auch das jeweilige Anführungszeichen, mit dem der Wert des Attributes eingeschlossen wird.
Beispiel:
<?xml version="1.0" encoding="utf-8" ?> <!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 1000 1000" contentScriptType="application/ecmascript" xml:lang="de"> <title>Ereignisbehandlung</title> <rect x="20" y="20" width="100" height="100" fill="green" stroke="blue" stroke-width="2" onmousedown="evt.target.width.baseVal.value += 10" onmouseup="evt.target.height.baseVal.value += 10" onmousemove="evt.target.height.baseVal.value = 100; evt.target.width.baseVal.value = 100"> <set attributeName="width" to="50" begin="mouseout" /> <set attributeName="height" to="50" begin="mouseout" /> </rect> </svg>
Bei jedem Runterdrücken der Taste des Zeigergerätes wird bei Skriptinterpretation die Breite des Rechtecks um 10 erhöht, beim Loslassen wird die Höhe um 10 erhöht. Eine Bewegung des Zeigergerätes setzt die Größe zurück auf den Ausgangswert. Allerdings unterbinden die Animationen effektiv eine weitere sichtbare Änderung, sobald das Zeigergerät nicht mehr über dem Rechteck ist, weil die Animation höhere Priorität hat als die Manipulation des DOMs mit dem Skript.
[Bearbeiten] Ereignisbehandlung in SVG tiny 1.2
Während in SVG 1.1 die möglichen Ereignisse wie beschrieben explizit in SVG festgelegt ist, wurde in SVG tiny 1.2 eine etwas elegantere Methode eingeführt. Diese ermöglicht es, XML-Ereignisse zu verwenden, statt fester Attribute.
Zusätzlich gibt es das Element handler (zu deutsch etwa: die Anwendung), welches ebenfalls das auszuführende Skript enthält. handler ist dann das Kindelement jenes Elementes, welches der Empfänger eines Ereignisses ist.
Eine Anwendung kann auch mehrfach verwendet werden. Dazu wird ein Empfänger notiert, dies ist das Element aus dem Namensraum von XML Events listener. Dies enthält eine Angabe des zu registrierenden Ereignisses und eine Angabe der auszuführenden Anwendung.
Der Namensraum von XML Events ist:
http://www.w3.org/2001/xml-events
Typisch wird dazu im Hauptelement svg der Namensraum wie folgt notiert:
xmlns:ev="http://www.w3.org/2001/xml-events"
Elemente und Attribute aus diesem Namensraum haben dann das Präfix 'ev'.
Die Liste der verfügbaren Ereignisse ist im Kapitel über Interaktivität angeführt, sie deckt sich inhaltlich in größeren Teilen mit der Liste für SVG 1.1.
Die Ereignisse sind DOMFocusIn, DOMFocusOut, DOMactivate, click, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel, textInput, keydown, keyup und load.
Zusätzlich sind Dokumentereignisse nutzbar. Dieses sind resize, scroll, SVGZoom, SVGRotate.
Eine genauere Beschreibung des jeweiligen Ereignisses ist im Kapitel Interaktivität zu finden.
Ferner gibt es Attribute bezogen auf Animationselemente. Dies sind: beginEvent, endEvent, repeatEvent.
Dazu gibt es Ereignisse bezüglich des Ladens externer Ressourcen: loadstart, progress, loadend.
Ferner gibt es noch den SVGTimer.
[Bearbeiten] Anwendung, Element handler
| SVG | |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| tiny 1.2 | - | 9.5 | - | - | - | ? | ? | ? |
Das Element handler ähnelt dem Element script. Entweder beinhaltet das Element selbst ein Skript oder referenziert es.
Anders als bei script wird das Skript allerdings gegebenenfalls nur ausgeführt, wenn das entsprechende Ereignis eingetreten ist, nicht bereits, wenn das Element geladen ist. Die Funktionalität entspricht also der Ereignisbehandlung in SVG 1.1 mit den entsprechenden Attributen.
Das bereits erwähnte Attribut type dient dazu, den Inhaltstype für die Skriptsprache anzugeben.
[Bearbeiten] Attribut href von XLink
Mit dem Attribut href von XLink kann ein externes Skript referenziert werden. Ist dies Attribut angegeben, so wird der Inhalt des Elementes nicht interpretiert.
Für dieses Element ist href nicht animierbar.
Mit href sind auch die anderen Attribute von XLink verfügbar.
[Bearbeiten] Attribut event von XML Events
Mit dem Attribut event von XML Events wird angegeben, welches Ereignis die Anwendung auslösen soll.
Das Attribut gehört zum Namensraum
http://www.w3.org/2001/xml-events
Dieser Namensraum muss dann auch korrekt angegeben werden.
Die Liste der möglichen Ereignisse wurde bereits angegeben.
Das Attribut ist nicht animierbar.
[Bearbeiten] Beispiel zum Element handler
Folgendes Beispiel entspricht dem zur Ereignisbehandlung in SVG 1.1.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.2" baseProfile="tiny" viewBox="0 0 1000 1000" xml:lang="de"> <desc>Beispiel Element handler</desc> <rect id="Rechteck" x="20" y="20" width="100" height="100" fill="green" stroke="blue" stroke-width="2"> <handler type="application/ecmascript" ev:event="mousedown"> var Rechteck = evt.target; var width = Rechteck.getFloatTrait("width"); Rechteck.setFloatTrait("width", width + 10); </handler> <handler type="application/ecmascript" ev:event="mouseup"> var Rechteck = evt.target; var height = Rechteck.getFloatTrait("height"); Rechteck.setFloatTrait("height", height + 10); </handler> <handler type="application/ecmascript" ev:event="mousemove"> var Rechteck = evt.target; var width = Rechteck.getFloatTrait("width"); var height = Rechteck.getFloatTrait("height"); Rechteck.setFloatTrait("width", 100); Rechteck.setFloatTrait("height", 100); </handler> <set attributeName="width" to="50" begin="mouseout" /> <set attributeName="height" to="50" begin="mouseout" /> </rect> </svg>
[Bearbeiten] Empfänger, Element listener von XML Events
| SVG | |
|
|
|
|
|
|
|
|---|---|---|---|---|---|---|---|---|
| tiny 1.2 | - | 9.5 | - | - | - | ? | ? | ? |
Mit dem Element listener von XML Events kann ein Empfänger von Ereignissen notiert werden, welcher dann die Ausführung von Skripten auslösen kann, wenn das angegeben Ereignis eintritt.
Gegenüber dem Element handler ist listener eine Ergänzung für kompliziertere Konstruktionen.
Das Element gehört zum Namensraum
http://www.w3.org/2001/xml-events
Dieser Namensraum muss dann auch korrekt angegeben werden.
[Bearbeiten] Attribut event
Mit dem Attribut wird ein Ereignis angegeben, auf welches der Empfänger warten soll. Der Wert ist ein Ereignis wie bereits beschrieben.
Das Attribut ist nicht animierbar.
[Bearbeiten] Attribut observer
Mit dem Attribut kann angegeben werden, welches Element als der Empfänger des zu erwartenden Ereignisses registriert wird. Der Wert ist ein Fragmentidentifizierer im aktuellen Dokument.
Ist das Attribut nicht angegeben, so ist das Elternelement vom listener der Empfänger.
Das Attribut ist nicht animierbar.
[Bearbeiten] Attribut target
Das Attribut gibt den Fragmentidentifizierer des Zielelementes des Ereignisses an, wo also das Ereignis wirklich stattfindet. Der Wert ist ein Fragmentidentifizierer im aktuellen Dokument.
Ferner ist das Zielelement immer entweder das Element selbst, welches mit observer identifiziert wird oder ein Kindelement davon. Damit ist es also möglich, ein Kindelement innerhalb eines Gruppierungselementes anzusprechen, wobei das Gruppierungselement der Empfänger ist und das Kindelement das Zielelement des Ereignisses. Exakt das angegebene Element ist dann das Zielelement, nicht etwa ein Kindelement desselben.
Das Attribut ist nicht animierbar.
Beispiel:
<g id="g"> <ev:listener event="click" observer="g" target="t" handler="#Anwendung" xmlns:ev="http://www.w3.org/2001/xml-events"/> <handler id="Anwendung" type="application/ecmascript"> var t = evt.target; t.setFloatTrait("y", 80); </handler> <text x="20" y="20" id="t">Hallo <tspan id="s">Welt</tspan>!</text> </g>
Nur wenn 'Hallo ' oder '!' angeklickert wird, wird das Ereignis ausgelöst, nicht wenn 'Welt' angeklickert wird, weil das Zielelement des Ereignisses dann nicht #t ist, sondern #s.
[Bearbeiten] Attribut handler
Das Attribut referenziert eine Anwendung, einen handler, welcher beim Eintritt des Ereignisses gegebenenfalls ausgeführt wird.
Der Wert ist eine IRI einer Anwendung.
Das Attribut ist nicht animierbar.
[Bearbeiten] Attribut phase
Das Attribut setzt die Einfangphase für das Ereignis. Der einzige Wert ist 'default', was auch die Voreinstellung ist, daher muss das Attribut nicht explizit notiert werden.
Das Attribut ist nicht animierbar.
[Bearbeiten] Attribut propagate
Das Attribut gibt an, ob Ereignisse nach dem Eintritt weitergeleitet werden sollen oder nicht, also ob Einfang und Blubbern eingeleitet werden sollen.
Der Wert des Attributes ist entweder 'stop' oder 'continue'.
Mit 'stop' wird das Ereignis nicht weitergeleitet, das Ereignis blubbert also nicht weiter zu den Elternelementen. Mit 'continue' wird das Ereignis gegebenenfalls weitergeleitet, sofern es blubbert und wird auch von den Elternelementen registiert.
Die Voreinstellung ist 'continue'.
Das Attribut ist nicht animierbar.
[Bearbeiten] Attribut defaultAction
Das Attribut gibt an, ob nach der Skriptausführung die voreingestellte Aktion ausgeführt wird oder nicht. Bei einem Element a ist beispielsweise beim Anklickern die voreingestellte Aktion der Aufruf des Verweiszieles.
Der Wert des Attributes ist entweder 'cancel' oder 'perform'.
Mit 'cancel' wird die voreingestellte Aktion unterbunden. Mit 'perform' findet die voreingestellte Aktion nach der Skriptausführung statt.
Voreinstellung ist 'perform'.
Nicht alle Aktionen können unterbunden werden. Können sie nicht unterbunden werden, wird das Attribut ignoriert. Im Kapitel Interaktivität ist etwa angegeben, welche Ereignisse unterbrochen/unterbunden werden können.
Das Attribut ist nicht animierbar.
[Bearbeiten] Beispiel für Element listener
Ist Skriptinterpretation für ecmascript verfügbar, so springt das jeweilige Quadrat ein Stück weiter nach links unten, wenn sich das Zeigergerät ein bestimmtes Ereignis auslöst. Beim grünen Quadrat ist es 'mouseover', beim gelben 'mousewheel', beim magenta 'mousemove'. Wird der untere oder der rechte Rand des Dokumentes nahezu erreicht, springt das Quadrat nach oben, beziehungsweise links.
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" viewBox="0 0 1200 1000" xml:lang="de"> <title>Beispiel Elemente handler und listener</title> <defs> <ev:listener event="mouseover" observer="rect1" handler="#Anwendung"/> <ev:listener event="mousewheel" observer="rect2" handler="#Anwendung"/> <ev:listener event="mousemove" observer="rect3" handler="#Anwendung"/> <handler id="Anwendung" type="application/ecmascript"> var rect = evt.target; var x = rect.getFloatTrait("x"); if (x >= 1090) { x=x-1090; } var y = rect.getFloatTrait("y"); if (y >= 890) { y=y-890; } rect.setFloatTrait("x", (x+10)); rect.setFloatTrait("y", (y+10)); </handler> </defs> <rect width="1200" height="1000" fill="#ddd"/> <rect id="rect1" x="10" y="10" width="100" height="100" fill="#080" stroke="blue" stroke-width="2"/> <rect id="rect2" x="215" y="10" width="100" height="100" fill="#ff0" stroke="blue" stroke-width="2"/> <rect id="rect3" x="420" y="10" width="100" height="100" fill="#a0f" stroke="blue" stroke-width="2"/> </svg>
[Bearbeiten] Weitere Beispiele
Aufgrund der bereits diskutierten Sicherheitsprobleme ist es bei Wikibooks unterbunden, Dokumente hochzuladen, die Skripte enthalten, daher sind die Beispiele nicht direkt ausführbar, sondern nur als Quelltext verfügbar. Nach einer entsprechenden Prüfung, kann der Nutzer diese in ein SVG-Dokument kopieren und ausprobieren, sofern bei der Prüfung keine Bedenken aufgekommen sind und ein Darstellungsprogramm zur Verfügung steht, bei der die verwendete Skriptsprache interpretiert wird.
[Bearbeiten] drag 'n' drop
Bei aktivierter Skriptinterpretation der Sprache ecmascript können die Kreise verschoben werden. Durch Drücken der Taste des Zeigerelementes und Ziehen kann jeweils ein Kreis verschoben werden. Beim Loslassen verbleibt der Kreis an der letzten Position:
<?xml version="1.0"?> <svg version="1.1" width="600px" height="400px" xmlns="http://www.w3.org/2000/svg"> <title>drag 'n' drop</title> <defs> <script type="application/ecmascript" > <![CDATA[ function dnd(evt) { ziel = evt.target dx = ziel.cx.baseVal.value - evt.clientX; dy = ziel.cy.baseVal.value - evt.clientY; document.addEventListener("mousemove", mousemove_listener, true); document.addEventListener("mouseup", mouseup_listener, true); } function mouseup_listener(evt) { document.removeEventListener("mousemove", mousemove_listener, true); document.removeEventListener("mouseup", mouseup_listener, true); } function mousemove_listener(evt) { var id = ziel.ownerSVGElement.suspendRedraw(1000); ziel.cx.baseVal.value = evt.clientX + dx; ziel.cy.baseVal.value = evt.clientY + dy; ziel.ownerSVGElement.unsuspendRedraw(id); } ]]> </script> </defs> <polyline points="0,0 600,0 600,400 0,400 0,0" stroke="black" fill="DarkOrange"/> <circle id="circ" r="1cm" cx="5cm" cy="3cm" fill="SkyBlue" stroke="PaleTurquoise" stroke-width="5" onmousedown="dnd(evt)"/> <circle id="circ2" r="2cm" cx="3cm" cy="4cm" fill="Linen" stroke="SandyBrown" stroke-width="5" fill-opacity="0.5" onmousedown="dnd(evt)"/> </svg>
[Bearbeiten] Skriptanwendung, um die Orientierung von Markierungen zu erläutern
Ein Beispiel mit ecmascript, um die Funktion von orient="auto" zu erläutern:
Bei aktivierter Skriptinterpretation folgt das Linienende mit einer pfeilartigen Markierung der Bewegung der Maus. Bei mousedown wird der mit einem roten Quadrat markierte Anfang der Linie auf die aktuelle Position gesetzt.
Die Spitze des Pfeiles zeigt immer in Richtung der Linie. Das Quadrat ist immer entlang der x- und y-Achse ausgerichtet.
<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" width="400" height="300" xmlns="http://www.w3.org/2000/svg" onmousemove="set(evt,'2')" onmousedown="set(evt,'1')" xml:lang="de"> <title>Skriptanwendung und Markierungsorientierung</title> <defs> <script type="application/ecmascript"> function set(evt,num) { var linie = document.getElementById("lin"); linie.setAttribute("x"+num, evt.clientX); linie.setAttribute("y"+num, evt.clientY); } </script> <marker id="start" markerWidth="20" markerHeight="20" refX="5" refY="5"> <rect fill="red" width="10" height="10" /> </marker> <marker id="end" markerWidth="10" markerHeight="10" refX="10" refY="5" orient="auto"> <polygon points="0,0,10,5,0,10,0,0" fill="black"/> </marker> </defs> <line id="lin" x1="5" y1="50" x2="50" y2="100" stroke="green" marker-end="url(#end)" marker-start="url(#start)" /> </svg>
[Bearbeiten] Vergleich deklarative Animation und Skript
Sofern die Interpretation von Skripten vom Typ emcmascript verfügbar ist, ergibt sich bei folgendem Beispiel ein Vergleich einer schrittweisen Änderung von Attributen und Eigenschaften mit deklarativer Animation und Skript.
Die violett gefüllten Objekte werden per Skript animiert, die grünen per deklarativer Animation.
Unmittelbar sichtbar ist, dass die deklarative Animation für diese Anwendung deutlich einfacher und präziser ist als das Skript. Eine kontinuierliche deklarative Animation ist noch einfacher zu notieren, wie an der Gruppe mit dem cyanen Strich zu sehen ist, während dies mit einem Skript nicht durchführbar ist. Die zeitlichen Abweichungen liegen daran, dass das Skript Verarbeitungszeit benötigt, somit also die Aktion insgesamt die veranschlagten 10s und die Verarbeitungszeit dauert. Die Verarbeitungszeit ist indes vom Darstellungsprogramm abhängig, lässt sich also nicht so einfach berücksichtigen. Bei der deklarativen Animation berücksichtigt das Darstellungsprogramm die Verarbeitungszeit hingegen automatisch.
<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg" onload="StartAnimation(evt)" version="1.1"> <title>Vergleich deklarative Animation und Skript</title> <defs> <script type="application/ecmascript"><![CDATA[ //Zeiten in Millisekunden var Zeit = 0; var Zeitschritt = 100; var Dauer = 10000; var Gruppe; function StartAnimation(evt) { Gruppe = evt.target.ownerDocument.getElementById("g"); Skalieren(); } function Skalieren() { // Gruppe schrittweise vergrößern, bis es zehnfach vergrößert ist Skalierung = (Zeit * 10.) / Dauer; Gruppe.setAttribute("transform", "scale(" + Skalierung + ")"); // Durchsichtigkeit ändern Durchsichtigkeit = Zeit / Dauer; Gruppe.setAttribute("fill-opacity", Durchsichtigkeit); //Zeit vergrößern Zeit = Zeit + Zeitschritt; //nach maximaler Zeit beenden if (Zeit > Dauer) return; // Skalieren nochmal aufrufen, Zeitschritt später. setTimeout("Skalieren()", Zeitschritt) } ]]></script> </defs> <rect x="-200" y="-200" width="400" height="400" fill="#eee" stroke="black"/> <g id="g" fill="#a0f" stroke="#ff0"> <desc>Gegebenenfalls per Skript manipulierte Gruppe</desc> <circle r="9" cx="-10" cy="-10" /> <rect x="1" y="-19" width="18" height="18" rx="1" /> </g> <g fill="#062" stroke="#00a"> <desc>Vergleich diskrete deklarative Animation</desc> <animate attributeName="fill-opacity" calcMode="discrete" fill="freeze" values="0;0.01" dur="0.1s" repeatDur="10s" accumulate="sum" /> <animateTransform attributeName="transform" type="scale" fill="freeze" calcMode="discrete" values="0;0.1" dur="0.1s" repeatDur="10s" accumulate="sum"/> <circle r="9" cx="10" cy="10" /> <rect x="-19" y="1" width="18" height="18" rx="1" /> </g> <g fill="none" stroke="#0aa" stroke-width="0.2"> <desc>Vergleich kontinuierliche deklarative Animation</desc> <animate attributeName="stroke-opacity" fill="freeze" values="0;1" dur="10s" /> <animateTransform attributeName="transform" type="scale" fill="freeze" values="0;10" dur="10s"/> <circle r="9" cx="10" cy="10" /> <rect x="-19" y="1" width="18" height="18" rx="1" /> </g> </svg>
[Bearbeiten] switch und script
Einfaches Beispiel, welches switch, Merkmalszeichenkette (featureString) und ecma-script verwendet. Die Anzeige des Dokumentes hängt ab von einer feature-Zeichenkette und von ecma-script.
Erster Fall: Merkmalszeichenkette gibt wahr für script zurück und Skriptausführung ist aktiv - der Nutzer erhält eine Bitte, Skriptausführung abzuschalten, um mit dem Test fortzufahren.
Zweiter Fall: Merkmalszeichenkette gibt wahr für script zurück und Skriptausführung ist deaktiviert - der Nutzer bekommt eine Information über einen Fehler. Das Dokument enthält nur ecma-script. Falls das Darstellungsprogramm dies nicht interpretieren kann, sollte es falsch für die Merkmalszeichenkette und für dieses Dokument zurückgeben.
Dritter Fall: Merkmalszeichenkette gibt falsch für script zurück und Skriptausführung ist trotzdem aktiv - der Nutzer sieht eine Information über den Fehler - Skriptausführung sollte generell nicht verfügbar sein, wenn die Merkmalszeichenkette falsch zurückgibt.
Vierter Fall: Merkmalszeichenkette gibt falsch für script zurück und Skriptausführung ist deaktiviert - der Nutzer sieht einen Alternativtext. Zu beachten ist, dass die Merkmalszeichenkette eine Information darüber angibt, ob ein Merkmal unterstützt wird oder nicht, nicht ob es generell und irgendwelchen Umständen möglich ist, dass ein Merkmal unterstützt wird, in diesem Falle nur, ob Skriptausführung aktiviert ist. Falls die Merkmalszeichenketten irgendeinen Nutzen für Autoren haben sollen, muss der zurückgegebene Wert der Merkmalszeichenkette von den spezifischen aktuellen Bedingungen des entsprechenden Dokumentes und von den Voreinstellungen des Nutzers abhängen, nicht von einer generellen philosophischen Stellungnahme des Darstellungsprogrammes.
Das ausgeführte Skript in diesem Dokument ist eine Änderung des Präsentationsattributes display auf none beziehungsweise auf block, um dem Nutzer zusätzliche Informationen zur Skriptausführung zu geben.
Bei SVG tiny 1.2 kann zusätzlich noch eine bedingte Verarbeitung davon abhängig gemacht werden, ob requiredFormats="application/ecmascript" zutriff oder nicht, um herauszufinden, welche Skriptsprache verfügbar ist, wenn die Merkmalszeichenkette zu erkennen gibt, dass überhaupt eine Skriptinterpretation gegeben ist.
<?xml version="1.0" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" version="1.1" xml:lang="de" onload="display_bsp()"> <title> switch und script </title> <defs> <script type="application/ecmascript"> function display_bsp() { var bsp0 = document.getElementById("bsp0"); bsp0.setAttributeNS(null,"display", 'none'); var bsp1 = document.getElementById("bsp1"); bsp1.setAttributeNS(null,"display", 'none'); var bsp2 = document.getElementById("bsp2"); bsp2.setAttributeNS(null,"display", 'none'); var bsp3 = document.getElementById("bsp3"); bsp3.setAttributeNS(null,"display", 'block'); var bsp4 = document.getElementById("bsp4"); bsp4.setAttributeNS(null,"display", 'block'); var bsp5 = document.getElementById("bsp5"); bsp5.setAttributeNS(null,"display", 'block'); } </script> </defs> <switch> <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Script" fill="red" font-size="20" font-family="sans-serif"> <text x="20" y="100" id="bsp0" display="block">Nur sichtbar, falls Merkmalszeichenkette für script wahr ist,</text> <text x="20" y="200" id="bsp1" display="block">aber kein ecmascript interpretiert wird!</text> <text x="20" y="300" id="bsp2" display="block">Allerdings enthält das Dokument keine andere Skriptsprache als ecmascript.</text> <text x="20" y="400" id="bsp3" fill="gray" display="none">Skriptinterpretation aktiv!</text> <text x="20" y="500" id="bsp4" fill="black" display="none">Bitte Skriptinterpretation deaktivieren und neuladen, um mit dem Test fortzufahren!</text> </g> <g font-size="30" font-family="sans-serif" fill="#440"> <text x="20" y="70" font-size="50">Alternativtext</text> <text x="20" y="140" font-size="20">Sichtbar, wenn keine Skriptinterpretation verfügbar ist.</text> <text x="20" y="210" font-size="20" fill="#66f" display="block">Bei Bedarf Skriptinterpretation aktivieren und neuladen, um mit dem Test fortzufahren.</text> <text x="20" y="500" font-size="30" fill="red" display="none" id="bsp5">Skriptinterpretation trotzdem aktiv? Fehler!</text> </g> </switch> </svg>
[Bearbeiten] Weiterführende Literatur
- java-script und DOM bei selfhtml
- carto.net: Manipulating SVG Documents using the DOM and ECMAScript (en)
- carto.net: Event Handling using the DOM and ECMAScript (en)
- XML Events (en)
- SVG tiny 1.2 Mikro-DOM (en)
- Einbindung von ecmascript in SVG tiny 1.2 (en)
- Einbindung von Java in SVG tiny 1.2 (en)
- Einbindung von Perl in SVG tiny 1.2 (en)
- Einbindung von Python in SVG tiny 1.2 (en)
