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:
19: <![CDATA[
20:
21: var count=0;
22:
23: function DOMinant(evt)
24: {
25: var svgdoc, svgroot, objekt, recneu, anineu,
26: svgns="http://www.w3.org/2000/svg";
27:
28:
29: if(count==0)
30: {
31: svgdoc=evt.target.ownerDocument; // Dokumenteninstanz
32: svgroot=svgdoc.documentElement; // Wurzelelement
33: // oder: svgroot=document.documentElement;
34:
35: // Neue Eigenschaften fuer Kreis setzen
36:
37: objekt=svgdoc.getElementById("kreis"); // getElementById()
38: objekt.setAttribute("r","70"); // XML-Attribut setzen: setAttribute()
39: objekt.style.setProperty("fill","#FFC",""); // CSS-Attribut setzen: style.setProperty()
40:
41:
42: // Neues Element rect erstellen und mit Attributen sowie Werten versehen
43:
44: recneu=svgdoc.createElementNS(svgns,"rect"); // createElementNS()
45:
46: recneu.setAttribute("x","200"); // setAttribute()
47: recneu.setAttribute("y","70");
48: recneu.setAttribute("width","0");
49: recneu.setAttribute("height","100");
50: recneu.setAttribute("style","fill: #090; stroke: #000; stroke-width: 1px");
51:
52:
53: // Neues Element animation erstellen und mit Attributen sowie Werten versehen
54:
55: anineu=svgdoc.createElementNS(svgns,"animate");
56: anineu.setAttribute("attributeName","width");
57: anineu.setAttribute("attributeType","XML");
58: anineu.setAttribute("begin","1s");
59: anineu.setAttribute("dur","10s");
60: anineu.setAttribute("fill","freeze");
61: anineu.setAttribute("from","0");
62: anineu.setAttribute("to","300");
63:
64:
65: // die neuen Elemente in den Dokumentenbaum einhaengen
66:
67: svgroot.appendChild(recneu).appendChild(anineu); // appendChild()
68:
69: count++;
70: }
71: }
72:
73:
74: function DOMInfos(evt)
75: {
76: var svgdoc, anzahl, objekt, knoten, kind, kindobjekt, kindobjanz, name, typ, attr, attranz, output;
77:
78: svgdoc=evt.target.ownerDocument; // Dokumenteninstanz
79:
80: output="svgdoc: "+svgdoc+"\n";
81:
82: objekt=svgdoc.childNodes; // childNodes
83: anzahl=objekt.length; // length
84:
85: for(j=0;j<anzahl;j++)
86: {
87: kind=objekt.item(j).childNodes;
88: kindobjanz=kind.length;
89:
90: if(kindobjanz>0)
91: {
92: for(l=0;l<kindobjanz;l++)
93: {
94: name=kind.item(l).nodeName; // nodeName
95: typ=kind.item(l).nodeType; // nodeType
96:
97: knoten="";
98:
99: if(typ==1) // Elementknoten
100: {
101: attr=kind.item(l).attributes(); // Attribute
102: attranz=attr.length;
103: knoten="Element "+name+" hat "+ attranz+" Attribute:";
104:
105: if(attranz>0)
106: {
107: for(k=0;k<attranz;k++)
108: {
109: knoten+="\n"+attr.item(k).name+"=\""+attr.item(k).value+"\"";
110: }
111: }
112: }
113:
114: else if(typ==3) // Textknoten
115: {
116: knoten="Text: "+name;
117: }
118:
119: output+="\n"+knoten;
120: }
121: }
122: }
123:
124: alert(output);
125: }
126:
127: ]]>
128:
129: </script>
130:
131: </defs>
132:
133: <text x="20" y="30" style="fill: #000; font-size: 24px">DOM-Test 2</text>
134:
135: <circle cx="100" cy="100" r="30" style="fill: #F00" onclick="DOMTest(evt)"/>
136: <text id="txt" x="50" y="210" style="fill: #00C">Klicke den Kreis an!</text>
137:
138: <circle id="kreis" cx="100" cy="120" r="49" style="fill: #F00; stroke: #000; stroke-width: 2px" onclick="DOMinant(evt)"/>
139: <text x="50" y="240">Klick auf den Kreis ändert Radius und Farbe und fügt Rechteck mit Animation hinzu.</text>
140: <a xlink:href="" cursor="pointer" onclick="return false"><text x="195" y="270" style="fill: #F00; text-decoration: underline" onclick="DOMInfos(evt)">Funktion DOMInfos() aufrufen ...</text></a>
141:
142: </svg>
[zum Anfang]
