SVG – Learning by Coding

[ weather.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-familysans-serif;
 25:         font-size12px;
 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==&& 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&amp;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:   <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:   <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:   <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]