SVG + Inline-HTML

◀  Im blau umrandeten Rahmen ist die ObjektGrafik-Datei foreignobject.svg eingebettet.
Sie enthält einige typische → SVG ObjektGrafik-Elemente, z.B. <circle>, <rect>

• Darüber hinaus ist ein → HTML-Element im gleichen Quelltext enthalten. Darin ist z.B. ein <button>-Element enthalten, welches beim Anklicken die Grafik-Objekte verändert.

Prinzipiell sind alle Mitglieder der → XML-Familie miteinander kompatibel. Man kann z.B. im gleichen Quelltext Objekte von → HTML (Webseiten), → SVG (Objektgrafik) und → MathML (Formeln) verwenden, diese mit <style>-Elementen (→ CSS) formatieren und → Javascript-Programme in <scipt>-Elementen auf alle Elemente anwenden.


Sie können den Quelltext in einer einfachen Text-Datei *.svg am eigenen PC speichern und mit jedem modernen Browser ansehen, oder in eigene Dokumente einsetzen.
Tipp: Vor dem Speichern die Zeilen-Nummern mit Klick entfernen.


Die Unterstützung durch andere Browser ist variabel. Bei Opera ist auffallend, dass die Linux-Versionen oft über wesentlich mehr Fähigkeiten verfügen als die aktuellen Windows-Versionen.

Inline-SVG: Umgekehrt kann man auch → SVG-Elemente in eine HTML-Webseite Inline einbetten.

Programmierung

  Aus diesem Quelltext hat ihr Browser die oben angezeigte Grafik hergestellt.

Der Text beginnt mit der XML-Deklaration. Es folgt das <svg>-Element, in welchem alle weiteren Elemente enthalten sind.

In einem <style>-Element sind → CSS-Regeln zur Formatierung der Elemente enthalten. Damit werden sowohl SVG-Elemente als auch HTML-Elemente formatiert.

In einem <script>-Element ist die → Javascript-Funktion demo() enthalten. Sie dreht die Grafik bei jedem Aufruf um 30°

Im SVG <defs>-Element wird das Element "dreieck" definiert.

Es folgt ein <g>-(Gruppen)-Element, welches alle 3 angezeigten Grafik-Objekte enthält. Einige der Elemente wurden in weitere Gruppen eingeschlossen: Damit wird erreicht, dass man sowohl die einzelnen Elemente als auch die ganze Gruppe um verschiedene (!) Mittelpunkte drehen kann.

Zuletzt folgt ein <foreignObject> Element aus einem anderen NameSpace - hier HTML in der Version → XHTML. Darin sind einige typische HTML-Elemente enthalten.
Wenn das <foreigneObject>-Element nicht unterstützt wird, dann sorgt das <switch>-Element dafür, dass der alternative Text angezeigt wird.



Das <foreignObject>-Element dient zur Einbettung von 'fremden' Elementen: Man kann alternativ auch einen anderen Namespace angeben, z.B. → MathML oder SMIL. Davon wurde hier abgesehen, weil MathML von aktuellen Browsern (mit Ausnahme von Firefox) nur mangelhaft unterstützt wird.

Das <switch>-Element erlaubt eine Bedingte Verzweigung: Wenn möglich wird das erste darin enthaltene Element angezeigt (Inline-HTML), ansonsten das nächste Element (hier: einige <text>-Elemente).

Die Überlagerung der Objekte wurde absichtlich programmiert. Man kann die Reihenfolge mit CSS ändern.


Beispiele: SVG bietet keine Elemente für einfachen Fließtext, keine Formulare oder Tabellen. Es wäre kompliziert, diese Elemente mit Grafik-Objekten nachzubauen. Die Inline-Einbettung von HTML ist elegant und sparsam.


Lösung für dieses Beispiel (es gibt auch andere Varianten):

Alle 3 Elemente werden gruppiert und mit transform=translate(120,120) nach rechts unten verschoben. Innerhalb der Gruppe gilt nun der Punkt (120,120) als Ursprung: Um diesen Punkt wird die ganze Gruppe id="g3" mit der Javascript-Funktion gedreht.

Wenn sich ein Element um seinen Mittelpunkt drehen soll, dann muss man seine Position symmetrisch zum Ursprung festlegen. Danach wird es mit dem Attribut transform="translate" an die gewünschte Position verschoben:
Der <circle> Kreis braucht jedoch nicht gedreht zu werden.
Das <rect> Rechteck wird mit x=-width/2 und y=-height/2 an den Ursprung gesetzt, dort gedreht und danach an den Punkt (-60,-20) verschoben.
Mit dem <use> Dreieck wird analog verfahren. Es wird nach Drehung um seinen Mittelpunkt nach (30,-20) verschoben.