SVG & DOM

SVG-ObjektGrafik und das Document Object Model

Das Document Object Model (DOM) bietet Möglichkeiten zur Manipulation aller Elemente von Webseiten oder SVG ObjektGrafik. Hier werden einige Methoden vorgestellet, um ObjektGrafik Live mit Javascript-Programmen herzustellen oder zu verändern.
SVG Scalable Vector Graphics - Entwicklung
DOM Document Object Model
Das document-Objekt Die 'Wurzel' der hierarchischen DOM-(Baum)-Struktur
Inline SVG Ein einziges Dokument mit XHTML, SVG, MathML, ...

Document Object Model
Das Document Object Model (Wikipedia: DOM) definiert eine standardisierte Schnittstelle für den Zugriff auf Dokumente, die in einem 'Hierarchischen Baum' strukturiert sind. Das klingt kompliziert, bezeichnet jedoch eine klare, einfache Methode zur Organisation und Manipulation von Webseiten, SVG-ObjektGrafik und allen anderen Mitgliedern der rasch wachsenden → XML-Familie.

Hierarchischer Baum

• Webseiten und viele anderen Dokumente der modernen Informatik sind in dieser Form aufgebaut:
• Jedes Dokument ist selbst ein Objekt mit dem fixen Namen document
Es ist von einem bestimmten Typ, welcher am Beginn mit der Anweisung <!DOCTYPE ...> festgelegt wird. Das document-Element hat normalerweise nur genau 1 Child-Element, z.B. das Element <html> in diesem Web-Dokument, oder das Element <svg> in einer SVG ObjektGrafik-Datei.
• Das Wurzel- oder Stamm-Element hat beliebig viele Tochter-(Child)-Elemente. Ein <html>-Element hat typisch nur diese beiden 'ChildNodes': <head> und <body>
• Jedes Element kann selbst beliebig viele childNodes erhalten. Jedes Child-Element hat jedoch nur genau 1 Parent-Element. Das entspricht einem Baum, der sich ausgehend vom Stamm immer weiter verzweigt. Von jedem Zweig führt jedoch nur ein einziger Weg zurück zum Stamm, d.h. es gibt keine 'Quer'-Verbindungen.

Zweck

Die wenigen strikten Regeln erleichtern die Orientierung auch in sehr komplexen Dokumenten. Programme zum Lesen einer DOM-Struktur (Parser) sind in jedem Browser und in vielen anderen modernen Programmen enthalten.
• Alle modernen Programmiersprachen können DOM-Strukturen analysieren, verändern oder neu aufbauen. Die DOM-Funktionen sind oft in eigenen Modulen organisiert.
● Besonders wichtig sind die DOM-Funktionen der Programmiersprache → Javascript (JS), da man JS-Programme in jedes HTML-, XML- oder SVG-Dokument aufnehmen kann. Mit JS kann man daher alle Webseiten, jede SVG-Grafik, usw. mit Animation oder interaktiven Fähigkeiten ausstatten: Man kann die Eigenschaften jedes einzelnen Elements ändern (Position, Größe, Schrift, Farbe, ...), neue Objekte erzeugen, usw.

Details zum DOM

Findet man auf zahlreichen Webseiten, z.B.
Wikipedia, W3C, SelfHTML, TU München, ...

♦ Einige Seiten dieses Webs zu DOM Detail-Themen:
DOM & Javascript, DOM-Elemente adressieren, manipulieren, Eigenschaften (Attribute) lesen oder ändern, Style-Objekt, ...
Spezielle DOM-Methoden für SVG-Grafik:

♣ Tipp: Es gibt einige Browser Zusatz-Programme (PlugIns) zur Anzeige der DOM-Struktur jeder beliebigen Webseite, z.B. DOM-Inspector
Suchen sie nach Stichworten wie EntwicklerInnen-Werkzeug (Development tools), kombiniert mit 'DOM'.

Das document-Objekt

document

In allen HTML-Dokumenten ebenso wie in allen XML-Dokumenten (z.B. XHTML, SVG, ...) bildet das document-Objekt die Wurzel des hierarchischen DOM-(Baum)-Struktur. Insbesondere zur Programmierung mit → Javascript ist es wichtig, dieses Objekt zuverlässig zu adressieren.
Dazu verwendet man die von Javascript angebotenen Standard → DOM-Methoden.
Es gibt allerdings einige Sonderfälle (nächste Absätze dieses Kapitels).
Javascript: Typische Verwendung des document-Objekts:
var n=document.getElementById("r1");
n.setAttribute("height",40);
ändert die Höhe dieses SVG-Rechtecks:
<rect id="r1" x="10" y="10" width="20" height="20" />

<iframe>

Die Einbettung einer eigenen Datei *.svg in einen HTML-→ InnenRahmen (<iframe>) ist derzeit ein guter Kompromiss zur Verwendung von SVG-ObjektGrafik in Webseiten.

● Alle modernen Browser zeigen die Grafik sauber und zuverlässig an und bieten Javascript zur Animation und interaktiven Bedienung.
● Der M$IE Browser zeigt mindestens die Webseite an, mit dem Adobe SVG Viewer je nach Version auch ststische oder dynamische Grafik.
● Wenn der M$IE Browser jemals wirklich SVG versteht, oder wenn sein Marktanteil vernachlässigbar geworden ist, dann kann man auf die Einbettung verzichten und Inline-SVG direkt im Quelltext von Webseiten verwenden.
► Webseite und SVG-Dokument sind in diesem Fall verschiedene Dateien mit je einem eigenen document-Objekt.
Beide Dateien können Javascript-Programme enthalten, die auf das eigene document-Objekt zugreifen. Um DOM-Methoden in der anderen Datei anzuwenden, startet man am besten deren Javascript-Programme.
Das folgende Beispiel demonstriert diesen Vorgang Live.
Es ist auf die wesentlichen Bestandteile gekürzt:
Beispiel der Webseite (gelb) mit eingebetteter SVG-Grafik:
<html>
...
<script type="text/javascript">
// <![CDATA[
function here() {
alert("Hier ist HTML");
}
function svg_demo() {
if1.demo(1.5);
}
// ]]>
</script>
...
<iframe src="demo.svg" id="if1" name="if1" style="height:300px; width:100%;">
</iframe>
...
<a href="javascript:here()">HTML</a><br />
<a href="javascript:if1.here()">SVG</a><br />
<a href="javascript:svg_demo()">Demo</a><br />
</html>
• Klick auf den 1.Link (HTML) startet das Programm here() der eigenen Webseite.
• Der 2.Link (SVG) startet das gleichnamige Programm des SVG-Dokuments.
• Der 3.Link (Demo) startet das eigene Programm svg_demo()
Dieses startet das Programm demo() des SVG-Dokuments. 		Beispiel der eingebetteten SVG-Datei (blau) demo.svg
<svg>
...
<script type="text/javascript">
// <![CDATA[
function here() {
alert("Hier ist SVG ");
}
function demo(mul) {
var n=document.getElementById("r1");
var h=n.getAttribute("width");
n.setAttribute("width",mul*h);
}
// ]]>
</script>
...
<rect id="r1" x="10" y="40" width="10" height="20" />
<circle cx="60" cy="100" r="20" onclick="here()" />
<circle cx="160" cy="100" r="20" onclick="parent.here()" />
...
</svg>
• Die Breite des Rechtecks r1 wird vom eigenen Programm demo() geändert. Dieses wird vom Programm svg_demo() der parent-Webseite ferngesteuert.
• Beim Anklicken der Kreisscheiben werden die here() Programme der beiden Dateien gestartet.

Aufwärts zur Wurzel

Manchmal ist es notwenig, von einem beliebigen Element ausgehend den DOM Objekt-Baum nach oben zu wandern. Das Beispiel rechts zeigt eine Möglichkeit dazu:

Man beginnt mit einem beliebigen Element (hier <svg>, auf Webseiten z.B. <body>
Die while-Schleife wird für das adressierte DOM-Element und alle seine parent-Elemente durchlaufen:
Die Eigenschaften jedes Knotens werden zur Demonstration in einem Alarmfenster angezeigt.
Die Schleife wird beendet, wenn das jeweilige Element n kein parent-Element hat. Dieses Element wird von der Funktion zurückgegeben. Es handelt sich normalerweise um das Element mit nodeName=#document und nodeType=9 		Javascript-Funktion klettert den DOM-ObjektBaum aufwärts bis zum letzten / obersten Element:
function dom_upwards() {
var n=document.getElementsByTagName("svg")[0];
var m=n; var nn=""; var nt="";
while(m) {
nn = n.nodeName;
nt = n.nodeType;
alert("nodeName="+nn+"\nnodeType="+nt);
try{
m = n.parentNode;
if(m) {n=m;}
}
catch(e) {}
}
return n;
}

Adobe SVG Viewer

Dieses Zusatz-Programm (PlugIn) für den M$IE Browser erlaubt auch den technisch rückständigen Versionen des M$IE Browsers die Anzeige von SVG Objekt-Grafik. Die weitere Entwicklung wurde eingestellt, weil alle modernen Browser bereits in der Grundausstattung SVG unterstützen.

Die beste Version 3.0 des Adobe SVG Viewers wurde leider aus 'Sicherheits-Gründen' zurückgezogen und ist nur mehr in Archiven zu finden. Sie bot ausgezeichnete Javascript-Funktionalität, die teilweise noch heute unerreicht ist.
In der von Adobe derzeit noch verfügbaren Version 3.03 ist Javascript abgeschaltet.

Der Adobe SVG Viewer verwendet das Objekt svgDocument an Stelle des Standard document-Objekts.
Das Beispiel rechts zeigt, wie man ein Javascript-Programm für beide Versionen verwenden kann. In weiteren Programmen (z.B. demo() ) verwendet man mydoc an Stelle von document 		Javascript-Programm zur Orientierung sowohl mit einem Standard-Browser als auch mit dem adobe SVG Viewer:
Die globale Javascript-Variable mydoc bietet den Zugang zum document-Objekt ebenso wie wie zum svgDocument-Objekt des Adobe SVG Viewers:
<svg ... onload="svg_onload()">
.....
<script type="text/ecmascript">
<![CDATA[
var mydoc=null;
function svg_onload() {
try{mydoc=svgDocument;}
catch(e) {mydoc=document;}
}
function demo() {
var n=mydoc.getElementById("r1");
n.setAttribute("height",40);
}
]]>
</script>
.....
</svg>

Inline SVG

Inline SVG-Elemente

Man kann in eine → XML-Datei Elemente jedes anderen Mitglieds der XML-Familie direkt (Inline) einbetten.
Ein Beispiel mit enormen Möglichkeiten ist die direkte Einbettung von Inline-SVG in eine → XHTML Webseite.

● Bei dieser Art der Einbettung wird die Grafik von allen modernen Browsern angezeigt und lässt sich mit → Javascript beliebig manipulieren.
Das erlaubt die einfache Verwendung (Anzeige, Animation, Interaktion) beliebig vieler Objektgrafik-Elemente in Webseiten.

● Lediglich die veralteten Versionen des M$IE Browsers haben Probleme, sowohl mit XML als auch mit XHTML und SVG. So lange der M$IE Browser noch signifikante Markt-Anteile hat, wird daher Inline-SVG in diesem Web noch nicht verwendet.
Eine Ausnahme sind einige XHTML-Dateien, die - wie hier - nur auf ausdrückliche Anforderung geladen werden. 		Struktur einer typischen XHTML Webseiten-Datei mit Inline SVG-Grafik:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>...</head>
<body>
<h1>XHTML+SVG Webseite</h1>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="40" r="30" fill="red" />
</svg>
</body>
</html>
Auch in diesem Beispiel steht ein einziges <circle>-Element stellvertretend für die gesamte ObjektGrafik.
Mit → Javascript-Programmen hat man in diesem Fall sowohl auf die XHTML-Elemente als auch auf die SVG-Elemente vollen Zugriff.

Laden sie hier eine Demo XHTML-Webseite mit Inline SVG-Grafik (und Inline MathML-Formel) und testen sie die Möglichkeiten ihres Browsers.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   SVG   >   DOM