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 09/03 - thomas@handmadecode.de -->
9:
10:
11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
12: onload="Init()">
13:
14: <title>SVG - Learning by Coding</title>
15: <desc>SVG-Spezifikation in Beispielen</desc>
16:
17: <defs>
18:
19: <style type="text/css">
20: <![CDATA[
21:
22: *
23: {
24: font-family: sans-serif;
25: font-size: 12px;
26: }
27:
28: g.ort text
29: {
30: fill: #000;
31: }
32:
33: g.temp text
34: {
35: fill: #F00;
36: }
37:
38: g.druck text
39: {
40: fill: #00C;
41: }
42:
43: ]]>
44: </style>
45:
46: <script type="text/javascript">
47: <![CDATA[
48:
49: var svgdoc=document.documentElement;
50: var xmldoc,l,t,p,tid,pid,run=0;error=0;
51:
52:
53: function Init()
54: {
55: if(window.getURL)
56: {
57: setTimeout("HoleDaten('Berlin','Germany')",1000);
58: setTimeout("HoleDaten('Bruxelle','Belgium')",3000);
59: setTimeout("HoleDaten('Leipzig','Germany')",5000);
60: setTimeout("HoleDaten('London','England')",7000);
61: }
62: else alert("Diese Technik ist nicht verfuegbar!");
63: }
64:
65:
66: function HoleDaten(City,Country)
67: {
68: // Beispielaufruf von weather.php:
69: // http://.../weather.php?City=Leipzig&Country=Germany
70: getURL("weather.php?City="+City+"&Country"+Country,callback);
71: run++;
72: }
73:
74:
75: function callback(urlRequestStatus)
76: {
77: if(urlRequestStatus.success && urlRequestStatus.content!="Error!")
78: {
79: xmldoc=parseXML(urlRequestStatus.content).documentElement;
80:
81: if(xmldoc)
82: {
83: // Wurzelelement: CurrentWeather
84: // Kindelemente: Location, Time, Wind, Visibility, Temperature,
85: // DewPoint, RelativeHumidity, Pressure, Status
86:
87: l=xmldoc.getElementsByTagName("Location").item(0).firstChild.nodeValue;
88: t=xmldoc.getElementsByTagName("Temperature").item(0).firstChild.nodeValue;
89: p=xmldoc.getElementsByTagName("Pressure").item(0).firstChild.nodeValue;
90:
91: if(l.indexOf("Berlin")!=-1)
92: {
93: tid="t1";
94: pid="p1";
95: }
96: if(l.indexOf("Bruxelle")!=-1)
97: {
98: tid="t2";
99: pid="p2";
100: }
101: if(l.indexOf("Leipzig")!=-1)
102: {
103: tid="t3";
104: pid="p3";
105: }
106: if(l.indexOf("London")!=-1)
107: {
108: tid="t4";
109: pid="p4";
110: }
111:
112: svgdoc.getElementById(tid).childNodes.item(0).nodeValue=t;
113: svgdoc.getElementById(pid).childNodes.item(0).nodeValue=p;
114: }
115: }
116: else
117: {
118: error++;
119: }
120:
121: if(run==4 && error>0)
122: alert("Bei der Abfrage von WebserviceX.NET\nist ein Fehler aufgetreten!");
123: }
124:
125: ]]>
126: </script>
127:
128: </defs>
129:
130: <a xlink:href="http://www.webservicex.net/WS/WSDetails.aspx?WSID=56&CATID=12" target="_top">
131: <text x="20" y="30" style="fill: #000; font-size: 24px">
132: Wetterdaten von WebserviceX.NET
133: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
134: <set attributeName="text-decoration" attributeType="CSS" to="underline"
135: begin="mouseover"/>
136: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
137: <set attributeName="text-decoration" attributeType="CSS" to="none"
138: begin="mouseout"/>
139: </text>
140: </a>
141:
142: <g class="ort">
143: <!-- statische Texte -->
144: <text x="20" y="70">Ort</text>
145: <text x="20" y="100">Berlin</text>
146: <text x="20" y="120">Brüssel</text>
147: <text x="20" y="140">Leipzig</text>
148: <text x="20" y="160">London</text>
149: </g>
150:
151: <g class="temp">
152: <text x="120" y="70">Temperatur</text>
153: <!-- dynamische Texte -->
154: <text id="t1" x="120" y="100"> </text>
155: <text id="t2" x="120" y="120"> </text>
156: <text id="t3" x="120" y="140"> </text>
157: <text id="t4" x="120" y="160"> </text>
158: </g>
159:
160: <g class="druck">
161: <text x="250" y="70">Druck</text>
162: <!-- dynamische Texte -->
163: <text id="p1" x="250" y="100"> </text>
164: <text id="p2" x="250" y="120"> </text>
165: <text id="p3" x="250" y="140"> </text>
166: <text id="p4" x="250" y="160"> </text>
167: </g>
168:
169: <line x1="20" y1="80" x2="390" y2="80"/>
170: <line x1="90" y1="55" x2="90" y2="165"/>
171: <line x1="230" y1="55" x2="230" y2="165"/>
172:
173: <a xlink:href="weather_php.txt" target="_top">
174: <text x="20" y="200" style="fill: #000; font-size: 11px">
175: PHP-Script zur Datenabfrage
176: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
177: <set attributeName="text-decoration" attributeType="CSS" to="underline"
178: begin="mouseover"/>
179: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
180: <set attributeName="text-decoration" attributeType="CSS" to="none"
181: begin="mouseout"/>
182: </text>
183: </a>
184:
185: </svg>
[zum Anfang]
