SVG – Learning by Coding
1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5: ]>
6:
7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8: <!-- Author: Dr. Thomas Meinike 12/02 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14:
15: <defs>
16:
17: <script type="text/javascript">
18: <![CDATA[
19:
20: var svgdoc,svgroot,svgtarget;
21:
22: function DOMTest(evt)
23: {
24: svgdoc=evt.target.ownerDocument;
25: alert(svgdoc);
26:
27: /*
28: gibt (analog zu HTML) das document-Object zurueck, Ausgabe: SVGDocument
29: oder alternativ
30: svgdoc=document; bzw. svgdoc=svgDocument;
31: */
32:
33: svgroot=svgdoc.documentElement;
34: alert(svgroot);
35:
36: /*
37: gibt (analog zu HTML) das documentElement-Object zurueck, Ausgabe: SVGSVGElement
38: oder alternativ
39: svgroot=svgdoc.documentElement;
40: */
41:
42: alert(svgroot.tagName); // Ausgabe von svg als Wurzelelement
43:
44: svgtarget=evt.target;
45: alert(svgtarget); // Ausgabe von SVGCircleElement,
46: // der aktuelle Element-Kontext (Kreis)
47: alert(svgtarget.tagName); // Ausgabe von circle
48:
49: alert(svgtarget.style.getPropertyValue("fill")); // gibt aktuelle Fuellfarbe aus
50: svgtarget.style.setProperty("fill","#00C",""); // faerbt den Kreis blau
51:
52:
53: // Text lesen und schreiben bzw. ersetzen:
54:
55: textknoten=svgroot.getElementById("txt").firstChild;
56: textinhalt=textknoten.data;
57: alert(textinhalt);
58: textknoten.data="Der Kreis wurde angeklickt.";
59: }
60:
61: ]]>
62: </script>
63:
64: </defs>
65:
66: <text x="20" y="30" style="fill: #000; font-size: 24px">DOM-Test 1</text>
67:
68: <circle cx="100" cy="100" r="30" style="fill: #F00" onclick="DOMTest(evt)"/>
69: <text id="txt" x="60" y="150" style="fill: #00C">Klicke den Kreis an!</text>
70:
71: </svg>
[zum Anfang]
