DOM-FAQ

Hier finden Sie häufig gestellte Fragen zum SVG-DOM. Da ich aber in letzter Zeit wenig Zeit hatte mich damit zu beschäftigen, befindet sich dieser Teil der FAQ auf dem Stand vom SVG-Viewer 2. Ich werde mich aber bemühen die FAQ in nächster Zeit zu aktualisieren.

SVG 2.1 DOM- und Skripting-Grundlagen

2.1.a
Was ist das DOM?
2.1.a DOM ist die Abkürzung für Document Object Modell und bezeichnet eine Hierarchie von Objekten, über die auf die Elemente einer SVG-Grafik, eines XML-Dokuments oder einer HTML-Seite zugegriffen werden kann. Das DOM einer SVG-Grafik ermöglicht die Manipulation der Grafik per Skript und auch die Reaktion auf Ereignisse und Benutzeraktionen.
2.1.b
Welche Möglichkeiten bietet das DOM?
2.1.b Das DOM bietet Eigenschaften, Methoden und Objekte, mit denen Sie Grafikelemente dynamisch zur Laufzeit erzeugen und auch von Benutzeraktionen abhängig machen können.  Damit können Sie Menüs, Sitemaps aber auch Navigationsleisten erstellen. Beispiele
2.1.c
Welche Skriptsprachen können verwendet werden?
2.1.c Im Prinzip können alle Skriptsprachen verwendet werden, die der Browser oder das Plug-In unterstützt, das den SVG-Code ausführt. Der SVG-Viewer nutzt dazu die JavaScript-Implementation des Browsers, so dass bei Ausführung im Plug-In nur JavaScript in Frage kommt.
2.1.d
Wie wird ein Skript in eine SVG-Grafik eingefügt?
2.1.d Um eine Skript einzufügen, stellt SVG einen <script>-Tag zur Verfügung. Innerhalt des Tags definieren Sie den Skriptinhalt dann in einem CDATA-Abschnitt. Das folgende Listing zeigt einen solchen <script>-Tag.

Listing: 2.1.d

...
<svg width="300" height="800">
<script type="text/ecmascript">
<![CDATA[
    function farbeAendern(evt)
    {
        ...
    }
]]> </script>
...
</svg>

2.1.e
Wie können Funktionen gestartet werden?
2.1.e Starten lassen sich Funktionen über Eventhandler und Event-Attribute. Bspw. können Sie für den <svg>-Tag das Attribut onload verwenden, um eine Funktion nach dem laden der Grafik auszuführen.

SVG 2.2 - Referenzen auf Grafikelemente

2.2.a
Wie kann innerhalb der Grafik auf Elemente der SVG-Grafik zugegriffen werden?
2.2.a Sie benötigen dazu eine Variable, die eine Referenz auf dasSVGDocument-Objekt speichert. Dies ist das oberste Objekt des DOMs. Sie können diese Referenz erzeugen, indem Sie im onload-Event der SVG-Grafik eine Funktion aufrufen und dort die Variable initialisieren. Das folgende Beispiel zeigt dies:

Listing 2.2.a

...
<svg width="320" height="300" onload="init(evt)">
<script type="text/ecmascript"><![CDATA[
var svgdok;
function init(evt)
{
  svgdok=
  evt.getTarget().getOwnerDocument();
}
]]> </script>
<text id="text01" x="10"
          y="40">Textelement</text>
</svg>

Download

Wichtig ist dabei, dass Sie der Funktion einen Parameter evt übergeben. evt stellt das Objekt dar, dass das Ereignis ausgelöst hat. Es wird automatisch korrekt an die Funktion übergeben. Wenn Sie die Funktion in einem Eventhandler des <svg>-Tags aufrufen, wird mit dem Parameter der SVG-Tag als SVGDocument-Objekt übergeben. In der Prozedur können Sie dann einer Variablen, hier svgdok das SVGDocument-Objekt  zuweisen. Dazu gibt es mehrere Möglichkeiten, aber nicht alle funktionieren auch mit dem Netscape Navigator. Die sicherste ist die im obigen Listing. Hier wird zunächst mit getTarget()-Methode das Zielobjekt des Events zurückgegeben. Auf diese Objekt können Sie dann die getOwnerDocument-Methode anwenden. Sie gibt immer das SVGDocument-Objekt zurück, das das Dokument repräsentiert, in dem das Zielobjekt des Events enthalten ist. Nachfolgend können Sie dann über verschieden Methoden auf die einzelnen Elemente des Dokuments zugreifen.

2.2.b
Warum funktioniert die target-Eigenschaft nicht?
2.2.b Anstelle der getTarget()-Methode gibt es theoretisch auch die Möglichkeit über die target-Eigenschaft auf das Zielelement des Events zugreifen. Diese Eigenschaft ist ebenfalls Bestandteil des DOMs. Leider unterstützt das Plug-In für den Netscape Navigator 4.x diese Eigenschaft und viele andere nicht. Daher sollten Sie immer die Methode verwenden, die funktioniert dann sowohl im IE als auch im NN.

SVG 2.3 - Besonderheiten einzelner Browser

2.3.a
Warum funktionieren viele Eigenschaften im Netscape Navigator nicht?
2.3.a Das SVG-DOM stellt zwar neben den Methoden auch ganz viele Eigenschaften zur Verfügung, bspw. um Attribute von Tags abzufragen, aber diese funktionieren in der Regel nicht im Netscape Navigator 4.x. Das liegt daran, dass im SVG-Viewer für den Netscape Navigator noch nicht alle DOM-Bestandteile implementiert sind. In der Regel gibt es aber zu einer Eigenschaft auch zwei Methoden, die Sie verwenden sollten, um Code zu erzeugen, der sowohl im IE als auch im NN läuft. Bspw. gibt es eine Eigenschaft id mit der im IE das id-Attribut gesetzt und abgefragt werden kann. Die Methode zum Setzen der Eigenschaft lautet dann setId(), die zum Lesen der Eigenschaft entsprechend getId().
2.3.b
Wo sind Informationen zur aktuellen DOM-Implementation des SVG-Viewers zu finden?
2.3.b Auf der Webseite von Adobe finden Sie die Dokumentation des SVG-Viewer. Dort sind auch die entsprechenden Angaben enthalten.

SVG 2.4 - DOM-Handling in Script- und Programmiersprachen

2.4.a
Ist es möglich das SVG-DOM über VBA zu manipulieren?
2.4.a Ja, ist es. Allerdings muss dazu ein SVGDocument-Objekt erzeugt werden und das geht zur Zeit nur, indem der SVG-Viewer 2.0 als ActiveX-Steuerelement in eine UserForm oder ein Access-Formular eingefügt wird. In dieses kann dann die SVG-Datei geladen und über das SVGDocument-Objekt angesprochen werden. Änderungen sind allerdings nur temporär, können also nicht in die Datei geschrieben werden. Mir ist auch im DOM noch keine Methode oder Eigenschaft begegnet, die wenigstens den Inhalt der SVG-Datei als Text zurückgeben würde. Um eine Datei zu erstellen müssen daher andere Methoden verwendet werden.
2.4.b
Kann eine SVG-Datei über die MSXMLDom-Objekt eingelesen und manipuliert werden?
2.4.b Nein, das geht leider nicht. Dies liegt daran, dass eine SVG-Datei eine für das MSXMLDom-Objekt unzulässige DTD verwendet.
2.4.c
Warum zeigt IntelliSense von VB/VBA andere Parameter, Methoden und Eigenschaften an, als die DOM-Spezifikation vorsieht?
2.4.c Warum ist mir nicht ganz klar. Offiziell verwenden sowohl JavaScript als auch VBA und VB die IDispatch-Schnittstelle von ActiveX-Objekten. Dennoch ist es so, dass der SVG-Viewer offenbar zumindest in der Version 2.0 (in Version 1.0 war die VB/VBA-Schnittstelle mit dem W3C-SVG-DOM identisch) in VB/VBA eine andere Schnittstelle zur Verfügung stellt. Dies allerdings nur dann, wenn frühe Bindung verwendet wird. Bei später Bindung entspricht die Schnittstelle der, die auch JavaScript verwendet. Zumindest lassen sich die Methoden dann mit den gleichen Parametern verwenden, ohne dass ein Syntax- oder Laufzeitfehler auftritt.
2.4.d
Wie kann IntelliSense in VB/VBA für das SVGDocument-Objekt des SVG-Viewers aktiviert werden?
2.4.d Wenn Sie in VB/VBA auf das SVGDocument-Objekt einer im SVG-Viewer geladenen Grafik zugreifen möchten, und dazu nicht auf IntelliSense verzichten möchten, sind dazu zwei Voraussetzungen notwendig:
  • Ein Verweis auf den SVG-Viewer bzw. dessen SVGDocument-Objekt.
  • Eine korrekt deklarierte Variable.

Um den Verweis zu erstellen, wählen Sie in der IDE den Eintrag "Extras/Verweise" aus und aktivieren das Kontrollkästchen vor dem Eintrag Adobe SVG Viewer Type Library 2.0 und schließen dann den Dialog mit OK.

Danach können Sie die benötigten Variablen wie im folgenden Listing deklarieren. Abhängig von dem Wert, den Sie zuweisen möchten, muss aber ein passender Klassenname angegeben werden. die Variable objSVGDok ermöglicht bspw. die Zugriff auf das SVGDocument-Objekt, der Variablen SVGCtl können Sie das SVG-Viewer-Steuerlement zuweisen und mit der Variablen objSVGRoot können Sie auf einen beliebigen Tag der Grafik zugreifen, da sie als SVGElement-Objekt deklariert ist. Um das style-Attribut einer Grafik zu speichern, das Sie mit der getStyle-Methode zurückgegeben haben, können Sie eine Variable des Typs CSSStyleDeclaration verwenden. Hierbei handelt es sich allerdings um eine Klasse die bei der hier verwendeten frühen Bindung vom W3C-Dom abweicht. Weitere Informationen.

Listing: 2.4.d

...
Dim objSVGDok As SVGDocument

Dim objSVGRoot As SVGElement

Dim objSVGControl As SVGCtl

Dim objSVGStil As CSSStyleDeclaration

2.4.e
Wie kann eine SVG-Datei mit VB/VBA erzeugt werden?
2.4.e SVG-Dateien sind ja reine Textdateien können also wie einfache Textdateien geschrieben, eingelesen und verändert werden. Dazu kann in VB/VBA wahlweise auf die einfache Befehle für Dateioperationen zurückgegriffen werden oder Sie können das FileSystemObject-Objekt des WSH verwenden. Allerdings können mit beiden Möglichkeiten nur Dateien seqentiell geschrieben und gelesen werden. Spätere Änderungen können nur sehr schwer durchgeführt werden. Mit eigenen Klassen lässt sich aber auch das recht einfach lösen. Sie finden im Download-Bereich zu den VBA-Beispielen bspw. eine VBA-Klasse, die es ermöglicht ein SVG-Dokument zu erstellen. Die Daten werden dazu in einer Collection verwaltet, die wahlfreien Zugriff auf die einzelnen SVG-Tags ermöglicht. Damit können Attribute und Tags auch nach dem Anfügen an das Dokument noch ergänzt oder geändert werden. Geschrieben wird die Datei aber erst mit der Save-Methode und sie ermöglicht lediglich das neu erstellen einer SVG-Grafik nicht aber das Einlesen und Ändern einer vorhandenen. Mit VB.Net und dem .Net-Framework ist dies jedoch möglich.

(c) 2003, Helma Spona, Dorfstr. 120c. 47647 Kerken-Stenden