|
Jede Webseite besteht aus einem Objekt-Baum (tree) nach dem DOM
(Document Object Model)-Modell.
Auch eine darin enthaltene SVG-Grafik ist ein DOM-Element. DOM-Test |
Hier werden einige Möglichkeiten demonstriert, die sich für die dynamische
Gestaltung von Webseiten ergeben. Derzeit funktionieren einige, jedoch noch nicht alle Beispiele, je nach Browser und Version. |
SVG
|
Scalable Vector Graphics - Entwicklung |
| Demo | SVG-Grafik auf Befehl laden oder löschen. |
| <embed> | SVG als <embed>-Element |
| <object> | SVG als <object>-Element |
| Löschen | Löschen aller childNodes eines DOM-Elements |
| Verzögerung | Verzögertes Laden einer SVG-Grafik |
Laden einer SVG-Grafik 'auf Befehl'
|
|
|
DOM-Methoden bieten die Möglichkeit, beliebige Elemente einer Webseite Live
zu erzeugen, zu ändern oder zu löschen. Das gilt auch für SVG-Grafik. Ein Spezialfall ist das automatische verzögerte Laden (Details) einer SVG-Grafik: Die Webseite wird sofort und damit sehr rasch angezeigt, langsamere Elemente (SVG-Grafik, .. ) werden erst danach geladen. |
Hier wird in
9
Sekunden
oder auf ihren Befehl ein SVG-<embed> in das Element <div id="svg1"></div> geladen |
Live- -Javascript:
Klicken sie diese Links zum Laden von SVG-Grafik als DOM-Objekt:
|
Wenn die SVG-Grafik nicht angezeigt wird, dann sollten sie testen, ob ihr Browser überhaupt SVG beherrscht. |
| Details zum Laden und Löschen von SVG-Objekten finden sie weiter unten auf dieser Seite. | Details zu weiteren Themen: SVG, DOM, Javascript |
SVG als <embed> |
|
|
Hier wird gezeigt, wie man SVG als <embed>-Element
an einen DOM-Knoten anhängt, in diesem Beispiel an das
Element <div id="svg1">, welches sich
an einer beliebigen Stelle im <body> der Webseite
befinden kann. Rechts der HTML-Code - Allerdings wird das <embed>-Element in diesem Beispiel erst mit Javascript erzeugt ! |
HTML-Code: leerer Knoten
<div id="svg1"></div>
Der gleiche Knoten mit SVG-Grafik
<div id="svg1">
<embed src="test2.svg" width="100" height="45" ></embed> </div> |
|
Zuerst wird der DOM-Knoten <div id="svg1">
mit getElementById adressiert und der
Variablen nsvg zugewiesen. Das <embed>-Element wird mit createElement erzeugt und der Variablen nemb zugewiesen. Nun werden die Attribute des <embed>-Elements erzeugt: Jedes Attribut (src, width, height) wird mit createAttributeNode erzeugt, sein Wert mit nodeValue zugewiesen. Danach wird der 'fertige' Attribut-Knoten mit setAttributeNode an das <embed>-Element angehängt. Zuletzt wird das fertige <embed>-Element an das bestehende Element <div id="svg1"> angehängt - Damit wird die SVG-Grafik angezeigt. 
Gelingt derzeit mit M$IE und Adobe SVG-PlugIn (Version 3).Wenn der adressierte DOM-Knoten <div id="svg1"> nicht leer ist, müssen anfangs seine childNodes gelöscht werden. Das wird hier mit Funktion childnodes_delete (s.u.) ausgeführt. |
Javascript-Code:
function svg_embed(id,src,x,y) {
// childnodes_delete(id);
var nsvg=document.getElementById(id);var nemb=document.createElement("embed"); var att= document.createAttribute("src"); att.nodeValue=src; nemb.setAttributeNode(att); att= document.createAttribute("width"); att.nodeValue=x; nemb.setAttributeNode(att); att= document.createAttribute("height"); att.nodeValue=y; nemb.setAttributeNode(att); nsvg.appendChild(nemb); |
|
Live--Javascript: Im anfangs gelben Feld rechts unterhalb befindet sich das Element <div id="svg1"> Sie können die gezeigten Funktionen mit diesen Links auslösen:
<a href="javascript:svg_embed('svg1','test2.svg',100,45)">
embed erzeugen
</a>
<a href="javascript:childnodes_delete('svg1')"> childNodes löschen </a> |
|
| Wenn die SVG-Grafik nicht angezeigt wird, dann sollten sie testen, ob ihr Browser überhaupt SVG beherrscht. |
Hier wird auf ihren Befehl ein SVG-<embed> in das Element
<div id="svg1"></div> geladen |
SVG als <object> |
|
|
Hier wird gezeigt, wie man SVG als <object>-Element
an einen DOM-Knoten anhängt, in diesem Beispiel an das
Element <div id="svg2">, welches sich
an einer beliebigen Stelle im <body> der Webseite
befinden kann. Rechts der HTML-Code - Allerdings wird das <object>-Element in diesem Beispiel erst mit Javascript erzeugt ! |
HTML-Code: leerer Knoten
<div id="svg2"></div>
Der gleiche Knoten mit SVG-Grafik
<div id="svg2">
<object data="test2.svg"
type="image/svg+xml"
</object>width="100" height="45"> </div> |
|
Zuerst wird der DOM-Knoten <div id="svg2">
mit getElementById adressiert und der
Variablen nsvg zugewiesen. Das <object>-Element wird mit createElement erzeugt und der Variablen nobj zugewiesen. Nun werden die Attribute des <object>-Elements erzeugt: Jedes Attribut (data, type, width, height) wird mit createAttributeNode erzeugt, sein Wert mit nodeValue zugewiesen. Danach wird der 'fertige' Attribut-Knoten mit setAttributeNode an das <object>-Element angehängt. Zuletzt wird das fertige <object>-Element an das bestehende Element <div id="svg2"> angehängt - Damit sollte die SVG-Grafik angezeigt werden -  -
mit derzeit gängigen Browsern ist das leider noch nicht gelungen.Wenn der adressierte DOM-Knoten <div id="svg2"> nicht leer ist, müssen anfangs seine childNodes gelöscht werden. Das wird hier mit Funktion childnodes_delete (s.u.) ausgeführt. |
Javascript-Code:
function svg_object(id,src,x,y) {
// childnodes_delete(id);
var nsvg=document.getElementById(id);var nobj=document.createElement("object"); var att= document.createAttribute("data"); att.nodeValue=src; nobj.setAttributeNode(att); var att= document.createAttribute("type"); att.nodeValue="image/svg+xml"; nobj.setAttributeNode(att); att= document.createAttribute("width"); att.nodeValue=x; nobj.setAttributeNode(att); att= document.createAttribute("height"); att.nodeValue=y; nobj.setAttributeNode(att); nsvg.appendChild(nobj); |
| Live--Javascript: Im anfangs gelben Feld rechts unterhalb befindet sich das Element <div id="svg2"> Sie können die gezeigten Funktionen mit diesen Links auslösen:
<a href="javascript:svg_object('svg2','test2.svg',100,45)">
object
erzeugen </a>
<a href="javascript:childnodes_delete('svg2')"> childNodes löschen </a> |
|
| Wenn die SVG-Grafik nicht angezeigt wird, dann sollten sie testen, ob ihr Browser überhaupt SVG beherrscht. |
Hier wird auf ihren Befehl ein SVG-<object> in das Element
<div id="svg2"></div> geladen |
Löschen von DOM-Elementen |
|
|
Rechts ein Javascript-Beispiel zum Löschen
aller childNodes eines beliebigen DOM-Elements. Das Element wird hier durch seine id definiert, dazu sind jedoch auch andere Methoden möglich. Im Prinzip genügt die while-Schleife zur Entfernung aller childNodes Der Einschluss in einen try-Block unetrdrückt allfällige Fehler-Meldungen, z.B. wenn der adressierte Knoten nicht existiert. Wenn sie den Kommentar vor dem alert entfernen, dann wird bei Bedarf die Fehlermeldung angezeigt. |
Javascript-Code:
function childnodes_delete(id) {
try {
}
var n=document.getElementById(id);
}while(n.childNodes.length>0) { n.removeChild(n.firstChild);
}
catch(e) { // alert("Fehler "+e);
}
|
Der Aufruf der Funktion erfolgt z.B. aus einem anderen Javascript-Programm
oder durch einen HTML-Link. Live- -Test:
Jedes der Beispiele weiter oben auf dieser Seite kann mit der Funktion
gelöscht werden. |
Aufruf aus Javascript:
childnodes_delete("svg1");
Aufruf durch einen HTML-Link:
<a href="javascript:childnodes_delete('svg1')>
Element svg1 löschen
</a>
|
Verzögertes Laden |
|
|
Hier wird gezeigt, wie man verschiedene Aufgaben (z.B. SVG-Grafik mit DOM-Methoden
erzeugen) automatisch auslösen kann. Das wird am onload-Ereignis (Event) demonstriert, welches nach dem vollständigen Laden einer Webseite auftritt. |
<html>
<head> ... <script type="text/javascript">
function my_onload() {
</script>svg_embed('tst.svg',100,50);
}
</head> <body onload="my_onload()"> ... </body> </html> |
| Das onload-Attribut im <body>-Element verweist auf eine Javascript-Funktion (hier my_onload ). | Die Auslösung mit dem onload-Event ist typisch für alle Aufgaben, die mit DOM-Methoden ausgeführt werden. Die Webseite muss 'fertig' sein, bevor die darin enthaltenen Elemente manipuliert werden können. |
|
Eine weitere Möglichkeit bietet das Timeout-Ereignis: Methode setTimeout verweist auf eine Javascript-Funktion, welche nach der angegebenen Zeit in Millisekunden ausgerufen wird. |
Ausführung der Funktion svg_embed 1 Sekunde (1000ms)
nach dem Start der Funktion my_onload
function my_onload() {
Periodische Auslösung: Eine Funktion kann sich mit Timeout
auch selbst aufrufen:
window.setTimeout("svg_embed('tst.svg',100,50)", 1000);
}
function do_repeat() {
// do something
window.setTimeout("do_repeat()", 1000);
|
| ♦ Details zu weiteren Themen: SVG, DOM, Javascript | |
> Entwicklung
> SVG
|
