SVG – Learning by Coding

[ periodensystem.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: <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:     <style type="text/css">
 18:       <![CDATA[
 19: 
 20:       *
 21:       {
 22:         font-familysans-serif;
 23:         font-size12px;
 24:       }
 25: 
 26:       rect
 27:       {
 28:         stroke#000;
 29:         stroke-width1.5px;
 30:         fillnone;
 31:       }
 32: 
 33:       text
 34:       {
 35:         pointer-eventsnone;
 36:       }
 37: 
 38:       /* Nichtmetalle */
 39:       .nm
 40:       {
 41:         fill#FCC;
 42:       }
 43: 
 44:       /* Halbmetalle */
 45:       .hm
 46:       {
 47:         fill#3C3;
 48:       }
 49: 
 50:       /* Hauptgruppen-Metalle */
 51:       .mh
 52:       {
 53:         fill#0CF;
 54:       }
 55: 
 56:       /* Nebengruppen-Metalle */
 57:       .mn
 58:       {
 59:         fill#9FF;
 60:       }
 61: 
 62:       .daten1 text
 63:       {
 64:         fill#00C;
 65:       }
 66: 
 67:       .daten2 text
 68:       {
 69:         fill#F00;
 70:       }
 71: 
 72:       .fbox
 73:       {
 74:         stroke#000;
 75:         stroke-width0.8px;
 76:       }
 77: 
 78:       .aktelem
 79:       {
 80:         fill#FF0;
 81:       }    
 82: 
 83:       line.la
 84:       {
 85:         stroke#F00;
 86:         stroke-width1.5px;
 87:       }
 88: 
 89:       line.ac
 90:       {
 91:         stroke#00C;
 92:         stroke-width1.5px;
 93:       }
 94: 
 95:       ]]>
 96:     </style>
 97: 
 98:     <script type="text/javascript">
 99:       <![CDATA[
100: 
101:       var svgdoc=document;
102:       var svgroot=svgdoc.documentElement;
103:       var objekt,oldobj,oldclass,xmldoc,AN,EN,SY,AW,BP,IP,EY,AR,MP,DE;
104:       var ANobj,ENobj,SYobj,AWobj,BPobj,IPobj,EYobj,ARobj,MPobj,DEobj;
105:       var A=String.fromCharCode(197); // Angstroem-Zeichen
106:       var url,req;
107: 
108:       // Ereignisse fuer die Boxen der chemischen Elemente ueberwachen
109:       svgroot.addEventListener("mouseover",ElementOver,false);
110:       svgroot.addEventListener("mouseout",ElementOut,false);
111:       svgroot.addEventListener("click",ElementClick,false);
112: 
113: 
114:       function ElementOver(mouseover_evt)
115:       {
116:         objekt=mouseover_evt.target;
117: 
118:         if(objekt.parentNode.tagName=="g" && objekt.parentNode.firstChild.getAttribute("class")!="aktelem")
119:         {
120:           objekt.style.setProperty("fill-opacity","0.4","");
121:         }
122:       }
123: 
124: 
125:       function ElementOut(mouseout_evt)
126:       {
127:         objekt=mouseout_evt.target;
128: 
129:         if(objekt.parentNode.tagName=="g")
130:         {
131:           objekt.style.setProperty("fill-opacity","1.0","");
132:         }
133:       }
134: 
135: 
136:       function ElementClick(mouseclick_evt)
137:       {
138:         objekt=mouseclick_evt.target;
139: 
140:         if(objekt.parentNode.tagName=="g")
141:         {
142:           // Ausgabetexte loeschen
143:           svgdoc.getElementById("ANout").firstChild.nodeValue="";
144:           svgdoc.getElementById("ENout").firstChild.nodeValue="";
145:           svgdoc.getElementById("SYout").firstChild.nodeValue="";
146:           svgdoc.getElementById("AWout").firstChild.nodeValue="";
147:           svgdoc.getElementById("BPout").firstChild.nodeValue="";
148:           svgdoc.getElementById("IPout").firstChild.nodeValue="";
149:           svgdoc.getElementById("EYout").firstChild.nodeValue="";
150:           svgdoc.getElementById("ARout").firstChild.nodeValue="";
151:           svgdoc.getElementById("MPout").firstChild.nodeValue="";
152:           svgdoc.getElementById("DEout").firstChild.nodeValue="";
153: 
154:           // aktuelles Element gelb markieren - vorheriges Element zurueck setzen
155:           if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass);
156:           oldclass=objekt.parentNode.firstChild.getAttribute("class");
157:           objekt.parentNode.firstChild.setAttribute("class","aktelem");
158:           objekt.parentNode.firstChild.style.setProperty("fill-opacity","1.0","");
159:           oldobj=objekt;
160:         }
161:       }
162: 
163: 
164:       function HoleDaten(EName)
165:       {
166:         // Beispielaufruf von ptable.php:
167:         // http://.../ptable.php?EName=Actinium
168:         url="ptable.php?EName="+EName;
169:         req=false;
170: 
171:         if(window.getURL)getURL(url,callback);
172:         else if(window.XMLHttpRequest)
173:         {
174:           req=new XMLHttpRequest();
175:           if(req)
176:           {
177:             req.onreadystatechange=callback2;
178:             req.open("GET",url,true);
179:             req.send(null);
180:           }
181:         }
182:       }
183: 
184: 
185:       function callback(urlRequestStatus)
186:       {
187:         if(urlRequestStatus.success && urlRequestStatus.content!="Error!")
188:         {
189:           xmldoc=parseXML(urlRequestStatus.content).documentElement;
190:           if(xmldoc)BearbeiteDaten();
191:         }
192:         else Fehler();
193:       }
194: 
195: 
196:       function callback2()
197:       {
198:         if(req.readyState==4)
199:         {
200:           if(req.status==200 && req.responseText!="Error!")
201:           {
202:             xmldoc=req.responseXML.documentElement;
203:             if(xmldoc)BearbeiteDaten();
204:           }
205:           else Fehler();
206:         }
207:       }
208: 
209: 
210:       function Fehler()
211:       {
212:         // gelb markiertes Element zurueck setzen
213:         if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass);
214:         // Fehlermeldung ausgeben
215:         alert("Bei der Abfrage von WebserviceX.NET\nist ein Fehler aufgetreten!");
216:       }
217: 
218: 
219:       function BearbeiteDaten()
220:       {
221:         // Wurzelelement: NewDataSet (mit Kindelement Table)
222:         // Kindelemente von Table:
223:         // AtomicNumber, ElementName, Symbol, AtomicWeight, BoilingPoint,
224:         // IonisationPotential, EletroNegativity, AtomicRadius, MeltingPoint, Density
225: 
226:         // XML-Daten auslesen
227:         ANobj=xmldoc.getElementsByTagName("AtomicNumber");
228:         if(ANobj && ANobj.length>0)AN=ANobj.item(0).firstChild.nodeValue;
229:         else AN="";
230: 
231:         ENobj=xmldoc.getElementsByTagName("ElementName");
232:         if(ENobj && ENobj.length>0)EN=ENobj.item(0).firstChild.nodeValue;
233:         else EN="";
234: 
235:         SYobj=xmldoc.getElementsByTagName("Symbol");
236:         if(SYobj && SYobj.length>0)SY=SYobj.item(0).firstChild.nodeValue;
237:         else SY="";
238: 
239:         AWobj=xmldoc.getElementsByTagName("AtomicWeight");
240:         if(AWobj && AWobj.length>0)AW=AWobj.item(0).firstChild.nodeValue;
241:         else AW="";
242: 
243:         BPobj=xmldoc.getElementsByTagName("BoilingPoint");
244:         if(BPobj && BPobj.length>0)BP=BPobj.item(0).firstChild.nodeValue;
245:         else BP="";
246: 
247:         IPobj=xmldoc.getElementsByTagName("IonisationPotential");
248:         if(IPobj && IPobj.length>0)IP=IPobj.item(0).firstChild.nodeValue;
249:         else IP="";
250: 
251:         EYobj=xmldoc.getElementsByTagName("EletroNegativity");
252:         if(EYobj && EYobj.length>0)EY=EYobj.item(0).firstChild.nodeValue;
253:         else EY="";
254: 
255:         ARobj=xmldoc.getElementsByTagName("AtomicRadius");
256:         if(ARobj && ARobj.length>0)AR=ARobj.item(0).firstChild.nodeValue;
257:         else AR="";
258: 
259:         MPobj=xmldoc.getElementsByTagName("MeltingPoint");
260:         if(MPobj && MPobj.length>0)MP=MPobj.item(0).firstChild.nodeValue;
261:         else MP="";
262: 
263:         DEobj=xmldoc.getElementsByTagName("Density");
264:         if(DEobj && DEobj.length>0)DE=DEobj.item(0).firstChild.nodeValue;
265:         else DE="";
266: 
267:         // auf max. 6 Stellen runden                     E i n h e i t e n
268:         if(AR!="")AR=parseFloat(AR).toFixed(6)+" "+A// Angstroem (A = &#197;)
269:         if(AW!="")AW=parseFloat(AW).toFixed(6)+" u";  // atomic units
270:         if(BP!="")BP=parseFloat(BP).toFixed(6)+" K";  // Kelvin
271:         if(MP!="")MP=parseFloat(MP).toFixed(6)+" K";  // Kelvin
272:         if(IP!="")IP=parseFloat(IP).toFixed(6)+" eV"// Elektronenvolt
273:         if(EY!="")EY=parseFloat(EY).toFixed(6);
274:         if(DE!="")DE+=" kg / m^3";                    // Kilogramm pro Kubikmeter
275: 
276:         // Ergebnisse ausgeben
277:         svgdoc.getElementById("ANout").firstChild.nodeValue=AN;
278:         svgdoc.getElementById("ENout").firstChild.nodeValue=EN;
279:         svgdoc.getElementById("SYout").firstChild.nodeValue=SY;
280:         svgdoc.getElementById("AWout").firstChild.nodeValue=AW;
281:         svgdoc.getElementById("BPout").firstChild.nodeValue=BP;
282:         svgdoc.getElementById("IPout").firstChild.nodeValue=IP;
283:         svgdoc.getElementById("EYout").firstChild.nodeValue=EY;
284:         svgdoc.getElementById("ARout").firstChild.nodeValue=AR;
285:         svgdoc.getElementById("MPout").firstChild.nodeValue=MP;
286:         svgdoc.getElementById("DEout").firstChild.nodeValue=DE;
287:       }
288: 
289:       ]]>
290:     </script>
291: 
292:   </defs>
293:  
294:   <text x="20" y="30" style="fill: #000; font-size: 24px">
295:     Periodensystem der Elemente mit Online-Datenabfrage</text>
296: 
297:   <!-- Gruppennummern -->
298:   <text x="45" y="70">Hauptgruppe</text>  
299:   <text x="58" y="90">I</text>  
300:   <text x="88" y="90">II</text>  
301: 
302:   <text x="220" y="160">Nebengruppe</text>  
303:   <text x="118" y="180">III</text>  
304:   <text x="148" y="180">IV</text>  
305:   <text x="178" y="180">V</text>  
306:   <text x="208" y="180">VI</text>  
307:   <text x="238" y="180">VII</text>  
308:   <text x="298" y="180">VIII</text>  
309:   <text x="358" y="180">I</text>  
310:   <text x="388" y="180">II</text>  
311: 
312:   <text x="470" y="70">Hauptgruppe</text>  
313:   <text x="418" y="90">III</text>  
314:   <text x="448" y="90">IV</text>  
315:   <text x="478" y="90">V</text>  
316:   <text x="508" y="90">VI</text>  
317:   <text x="538" y="90">VII</text>  
318:   <text x="568" y="90">VIII</text>  
319: 
320:   <!-- Periodennummern -->
321:   <text x="45" y="70" transform="translate(-45,270) rotate(-90)">Periode</text>  
322:   <text x="35" y="120">1</text>
323:   <text x="35" y="150">2</text>
324:   <text x="35" y="180">3</text>
325:   <text x="35" y="210">4</text>
326:   <text x="35" y="240">5</text>
327:   <text x="35" y="270">6</text>
328:   <text x="35" y="300">7</text>
329: 
330:   <!-- Lanthanoide/Actinoide -->
331:   <text x="35" y="350">Lanthanoide</text>
332:   <text x="35" y="390">Actinoide</text>
333: 
334:   <!-- Legende der Farben -->
335:   <text x="35" y="430">Zuordung der Farben:</text>
336:   <rect class="nm fbox" x="35" y="440" width="10" height="10"/><text x="50" y="450">&gt; Nichtmetalle</text>
337:   <rect class="hm fbox" x="35" y="455" width="10" height="10"/><text x="50" y="465">&gt; Halbmetalle</text>
338:   <rect class="mh fbox" x="35" y="470" width="10" height="10"/><text x="50" y="480">&gt; Hauptgruppen-Metalle</text>
339:   <rect class="mn fbox" x="35" y="485" width="10" height="10"/><text x="50" y="495">&gt; Nebengruppen-Metalle</text>
340:   <rect class="aktelem fbox" x="35" y="500" width="10" height="10"/><text x="50" y="510">&gt; Aktuelles Element</text>
341: 
342:   <!-- 1. Hauptgruppe -->
343:   <g onclick="HoleDaten('Hydrogen')"><rect class="nm" x="50" y="100" width="30" height="30"/><text x="58" y="120">H</text></g>
344:   <g onclick="HoleDaten('Lithium')"><rect class="mh" x="50" y="130" width="30" height="30"/><text x="58" y="150">Li</text></g>
345:   <g onclick="HoleDaten('Sodium')"><rect class="mh" x="50" y="160" width="30" height="30"/><text x="58" y="180">Na</text></g>
346:   <g onclick="HoleDaten('Potassium')"><rect class="mh" x="50" y="190" width="30" height="30"/><text x="58" y="210">K</text></g>
347:   <g onclick="HoleDaten('Rubidium')"><rect class="mh" x="50" y="220" width="30" height="30"/><text x="58" y="240">Rb</text></g>
348:   <g onclick="HoleDaten('Cesium')"><rect class="mh" x="50" y="250" width="30" height="30"/><text x="58" y="270">Cs</text></g>
349:   <g onclick="HoleDaten('Francium')"><rect class="mh" x="50" y="280" width="30" height="30"/><text x="58" y="300">Fr</text></g>
350: 
351:   <!-- 2. Hauptgruppe -->
352:   <g onclick="HoleDaten('Beryllium')"><rect class="mh" x="80" y="130" width="30" height="30"/><text x="88" y="150">Be</text></g>
353:   <g onclick="HoleDaten('Magnesium')"><rect class="mh" x="80" y="160" width="30" height="30"/><text x="88" y="180">Mg</text></g>
354:   <g onclick="HoleDaten('Calcium')"><rect class="mh" x="80" y="190" width="30" height="30"/><text x="88" y="210">Ca</text></g>
355:   <g onclick="HoleDaten('Strontium')"><rect class="mh" x="80" y="220" width="30" height="30"/><text x="88" y="240">Sr</text></g>
356:   <g onclick="HoleDaten('Barium')"><rect class="mh" x="80" y="250" width="30" height="30"/><text x="88" y="270">Ba</text></g>
357:   <g onclick="HoleDaten('Radium')"><rect class="mh" x="80" y="280" width="30" height="30"/><text x="88" y="300">Ra</text></g>
358: 
359:   <!-- 3. Nebengruppe -->
360:   <g onclick="HoleDaten('Scandium')"><rect class="mn" x="110" y="190" width="30" height="30"/><text x="118" y="210">Sc</text></g>
361:   <g onclick="HoleDaten('Yttrium')"><rect class="mn" x="110" y="220" width="30" height="30"/><text x="118" y="240">Y</text></g>
362:   <g onclick="HoleDaten('Lanthanum')"><rect class="mn" x="110" y="250" width="30" height="30"/><text x="118" y="270">La</text></g>
363:   <g onclick="HoleDaten('Actinium')"><rect class="mn" x="110" y="280" width="30" height="30"/><text x="118" y="300">Ac</text></g>
364: 
365:   <!-- 4. Nebengruppe -->
366:   <g onclick="HoleDaten('Titanium')"><rect class="mn" x="140" y="190" width="30" height="30"/><text x="148" y="210">Ti</text></g>
367:   <g onclick="HoleDaten('Zirconium')"><rect class="mn" x="140" y="220" width="30" height="30"/><text x="148" y="240">Zr</text></g>
368:   <g onclick="HoleDaten('Hafnium')"><rect class="mn" x="140" y="250" width="30" height="30"/><text x="148" y="270">Hf</text></g>
369:   <g onclick="HoleDaten('Curcigtonium')"><rect class="mn" x="140" y="280" width="30" height="30"/><text x="148" y="300">Ku</text></g>
370: 
371:   <!-- 5. Nebengruppe -->
372:   <g onclick="HoleDaten('Vanadium')"><rect class="mn" x="170" y="190" width="30" height="30"/><text x="178" y="210">V</text></g>
373:   <g onclick="HoleDaten('Niobium')"><rect class="mn" x="170" y="220" width="30" height="30"/><text x="178" y="240">Nb</text></g>
374:   <g onclick="HoleDaten('Tantalum')"><rect class="mn" x="170" y="250" width="30" height="30"/><text x="178" y="270">Ta</text></g>
375:   <g onclick="HoleDaten('Hahnium')"><rect class="mn" x="170" y="280" width="30" height="30"/><text x="178" y="300">Ha</text></g>
376: 
377:   <!-- 6. Nebengruppe -->
378:   <g onclick="HoleDaten('Chromium')"><rect class="mn" x="200" y="190" width="30" height="30"/><text x="208" y="210">Cr</text></g>
379:   <g onclick="HoleDaten('Molybdenum')"><rect class="mn" x="200" y="220" width="30" height="30"/><text x="208" y="240">Mo</text></g>
380:   <g onclick="HoleDaten('Tungsten')"><rect class="mn" x="200" y="250" width="30" height="30"/><text x="208" y="270">W</text></g>
381:   <g onclick="HoleDaten('Seaborgium')"><rect class="mn" x="200" y="280" width="30" height="30"/><text x="208" y="300">Sg</text></g>
382: 
383:   <!-- 7. Nebengruppe -->
384:   <g onclick="HoleDaten('Manganese')"><rect class="mn" x="230" y="190" width="30" height="30"/><text x="238" y="210">Mn</text></g>
385:   <g onclick="HoleDaten('Technetium')"><rect class="mn" x="230" y="220" width="30" height="30"/><text x="238" y="240">Tc</text></g>
386:   <g onclick="HoleDaten('Rhenium')"><rect class="mn" x="230" y="250" width="30" height="30"/><text x="238" y="270">Re</text></g>
387:   <g onclick="HoleDaten('Bohrium')"><rect class="mn" x="230" y="280" width="30" height="30"/><text x="238" y="300">Bh</text></g>
388: 
389:   <!-- 8. Nebengruppe -->
390:   <g onclick="HoleDaten('Iron')"><rect class="mn" x="260" y="190" width="30" height="30"/><text x="268" y="210">Fe</text></g>
391:   <g onclick="HoleDaten('Ruthenium')"><rect class="mn" x="260" y="220" width="30" height="30"/><text x="268" y="240">Ru</text></g>
392:   <g onclick="HoleDaten('Osmium')"><rect class="mn" x="260" y="250" width="30" height="30"/><text x="268" y="270">Os</text></g>
393:   <g onclick="HoleDaten('Hassium')"><rect class="mn" x="260" y="280" width="30" height="30"/><text x="268" y="300">Hs</text></g>
394:   <g onclick="HoleDaten('Cobalt')"><rect class="mn" x="290" y="190" width="30" height="30"/><text x="298" y="210">Co</text></g>
395:   <g onclick="HoleDaten('Rhodium')"><rect class="mn" x="290" y="220" width="30" height="30"/><text x="298" y="240">Rh</text></g>
396:   <g onclick="HoleDaten('Iridium')"><rect class="mn" x="290" y="250" width="30" height="30"/><text x="298" y="270">Ir</text></g>
397:   <g onclick="HoleDaten('Meitnerium')"><rect class="mn" x="290" y="280" width="30" height="30"/><text x="298" y="300">Mt</text></g>
398:   <g onclick="HoleDaten('Nickel')"><rect class="mn" x="320" y="190" width="30" height="30"/><text x="328" y="210">Ni</text></g>
399:   <g onclick="HoleDaten('Palladium')"><rect class="mn" x="320" y="220" width="30" height="30"/><text x="328" y="240">Pd</text></g>
400:   <g onclick="HoleDaten('Platinum')"><rect class="mn" x="320" y="250" width="30" height="30"/><text x="328" y="270">Pt</text></g>
401:   <g onclick="HoleDaten('Ununnilium')"><rect class="mn" x="320" y="280" width="30" height="30"/><text x="325" y="300">Uun</text></g>
402: 
403:   <!-- 1. Nebengruppe -->
404:   <g onclick="HoleDaten('Copper')"><rect class="mn" x="350" y="190" width="30" height="30"/><text x="358" y="210">Cu</text></g>
405:   <g onclick="HoleDaten('Silver')"><rect class="mn" x="350" y="220" width="30" height="30"/><text x="358" y="240">Ag</text></g>
406:   <g onclick="HoleDaten('Gold')"><rect class="mn" x="350" y="250" width="30" height="30"/><text x="358" y="270">Au</text></g>
407:   <g onclick="HoleDaten('Unununium')"><rect class="mn" x="350" y="280" width="30" height="30"/><text x="355" y="300">Uuu</text></g>
408: 
409:   <!-- 2. Nebengruppe -->
410:   <g onclick="HoleDaten('Zinc')"><rect class="mn" x="380" y="190" width="30" height="30"/><text x="388" y="210">Zn</text></g>
411:   <g onclick="HoleDaten('Cadmium')"><rect class="mn" x="380" y="220" width="30" height="30"/><text x="388" y="240">Cd</text></g>
412:   <g onclick="HoleDaten('Mercury')"><rect class="mn" x="380" y="250" width="30" height="30"/><text x="388" y="270">Hg</text></g>
413:   <g onclick="HoleDaten('Ununbium')"><rect class="mn" x="380" y="280" width="30" height="30"/><text x="385" y="300">Uub</text></g>
414: 
415:   <!-- 3. Hauptgruppe -->
416:   <g onclick="HoleDaten('Boron')"><rect class="hm" x="410" y="130" width="30" height="30"/><text x="418" y="150">B</text></g>
417:   <g onclick="HoleDaten('Aluminium')"><rect class="mh" x="410" y="160" width="30" height="30"/><text x="418" y="180">Al</text></g>
418:   <g onclick="HoleDaten('Gallium')"><rect class="mh" x="410" y="190" width="30" height="30"/><text x="418" y="210">Ga</text></g>
419:   <g onclick="HoleDaten('Indium')"><rect class="mh" x="410" y="220" width="30" height="30"/><text x="418" y="240">In</text></g>
420:   <g onclick="HoleDaten('Thallium')"><rect class="mh" x="410" y="250" width="30" height="30"/><text x="418" y="270">Tl</text></g>
421: 
422:   <!-- 4. Hauptgruppe -->
423:   <g onclick="HoleDaten('Carbon')"><rect class="nm" x="440" y="130" width="30" height="30"/><text x="448" y="150">C</text></g>
424:   <g onclick="HoleDaten('Silicon')"><rect class="hm" x="440" y="160" width="30" height="30"/><text x="448" y="180">Si</text></g>
425:   <g onclick="HoleDaten('Germanium')"><rect class="hm" x="440" y="190" width="30" height="30"/><text x="448" y="210">Ge</text></g>
426:   <g onclick="HoleDaten('Tin')"><rect class="mh" x="440" y="220" width="30" height="30"/><text x="448" y="240">Sn</text></g>
427:   <g onclick="HoleDaten('Lead')"><rect class="mh" x="440" y="250" width="30" height="30"/><text x="448" y="270">Pb</text></g>
428: 
429:   <!-- 5. Hauptgruppe -->
430:   <g onclick="HoleDaten('Nitrogen')"><rect class="nm" x="470" y="130" width="30" height="30"/><text x="478" y="150">N</text></g>
431:   <g onclick="HoleDaten('Phosphorous')"><rect class="nm" x="470" y="160" width="30" height="30"/><text x="478" y="180">P</text></g>
432:   <g onclick="HoleDaten('Arsenic')"><rect class="hm" x="470" y="190" width="30" height="30"/><text x="478" y="210">As</text></g>
433:   <g onclick="HoleDaten('Antimony')"><rect class="hm" x="470" y="220" width="30" height="30"/><text x="478" y="240">Sb</text></g>
434:   <g onclick="HoleDaten('Bismuth')"><rect class="mh" x="470" y="250" width="30" height="30"/><text x="478" y="270">Bi</text></g>
435: 
436:   <!-- 6. Hauptgruppe -->
437:   <g onclick="HoleDaten('Oxygen')"><rect class="nm" x="500" y="130" width="30" height="30"/><text x="508" y="150">O</text></g>
438:   <g onclick="HoleDaten('Sulphur')"><rect class="nm" x="500" y="160" width="30" height="30"/><text x="508" y="180">S</text></g>
439:   <g onclick="HoleDaten('Selenium')"><rect class="nm" x="500" y="190" width="30" height="30"/><text x="508" y="210">Se</text></g>
440:   <g onclick="HoleDaten('Telurium')"><rect class="hm" x="500" y="220" width="30" height="30"/><text x="508" y="240">Te</text></g>
441:   <g onclick="HoleDaten('Polonium')"><rect class="hm" x="500" y="250" width="30" height="30"/><text x="508" y="270">Po</text></g>
442: 
443:   <!-- 7. Hauptgruppe -->
444:   <g onclick="HoleDaten('Flourine')"><rect class="nm" x="530" y="130" width="30" height="30"/><text x="538" y="150">F</text></g>
445:   <g onclick="HoleDaten('Chlorine')"><rect class="nm" x="530" y="160" width="30" height="30"/><text x="538" y="180">Cl</text></g>
446:   <g onclick="HoleDaten('Bromine')"><rect class="nm" x="530" y="190" width="30" height="30"/><text x="538" y="210">Br</text></g>
447:   <g onclick="HoleDaten('Iodine')"><rect class="nm" x="530" y="220" width="30" height="30"/><text x="538" y="240">I</text></g>
448:   <g onclick="HoleDaten('Astatine')"><rect class="hm" x="530" y="250" width="30" height="30"/><text x="538" y="270">At</text></g>
449: 
450:   <!-- 8. Hauptgruppe -->
451:   <g onclick="HoleDaten('Helium')"><rect class="nm" x="560" y="100" width="30" height="30"/><text x="568" y="120">He</text></g>
452:   <g onclick="HoleDaten('Neon')"><rect class="nm" x="560" y="130" width="30" height="30"/><text x="568" y="150">Ne</text></g>
453:   <g onclick="HoleDaten('Argon')"><rect class="nm" x="560" y="160" width="30" height="30"/><text x="568" y="180">Ar</text></g>
454:   <g onclick="HoleDaten('Krypton')"><rect class="nm" x="560" y="190" width="30" height="30"/><text x="568" y="210">Kr</text></g>
455:   <g onclick="HoleDaten('Xenon')"><rect class="nm" x="560" y="220" width="30" height="30"/><text x="568" y="240">Xe</text></g>
456:   <g onclick="HoleDaten('Radon')"><rect class="nm" x="560" y="250" width="30" height="30"/><text x="568" y="270">Rn</text></g>
457: 
458:   <!-- 3. Nebengruppe Lanthanoide -->
459:   <g onclick="HoleDaten('Cerium')"><rect class="mn" x="110" y="330" width="30" height="30"/><text x="118" y="350">Ce</text></g>
460:   <g onclick="HoleDaten('Praseodymium')"><rect class="mn" x="140" y="330" width="30" height="30"/><text x="148" y="350">Pr</text></g>
461:   <g onclick="HoleDaten('Neodymium')"><rect class="mn" x="170" y="330" width="30" height="30"/><text x="178" y="350">Nd</text></g>
462:   <g onclick="HoleDaten('Promethium')"><rect class="mn" x="200" y="330" width="30" height="30"/><text x="208" y="350">Pm</text></g>
463:   <g onclick="HoleDaten('Samarium')"><rect class="mn" x="230" y="330" width="30" height="30"/><text x="238" y="350">Sm</text></g>
464:   <g onclick="HoleDaten('Europium')"><rect class="mn" x="260" y="330" width="30" height="30"/><text x="268" y="350">Eu</text></g>
465:   <g onclick="HoleDaten('Gadolinium')"><rect class="mn" x="290" y="330" width="30" height="30"/><text x="298" y="350">Gd</text></g>
466:   <g onclick="HoleDaten('Terbium')"><rect class="mn" x="320" y="330" width="30" height="30"/><text x="328" y="350">Tb</text></g>
467:   <g onclick="HoleDaten('Dysprosium')"><rect class="mn" x="350" y="330" width="30" height="30"/><text x="358" y="350">Dy</text></g>
468:   <g onclick="HoleDaten('Holmium')"><rect class="mn" x="380" y="330" width="30" height="30"/><text x="388" y="350">Ho</text></g>
469:   <g onclick="HoleDaten('Erbium')"><rect class="mn" x="410" y="330" width="30" height="30"/><text x="418" y="350">Er</text></g>
470:   <g onclick="HoleDaten('Thulium')"><rect class="mn" x="440" y="330" width="30" height="30"/><text x="448" y="350">Tm</text></g>
471:   <g onclick="HoleDaten('Ytterbium')"><rect class="mn" x="470" y="330" width="30" height="30"/><text x="478" y="350">Yb</text></g>
472:   <g onclick="HoleDaten('Lutetium')"><rect class="mn" x="500" y="330" width="30" height="30"/><text x="508" y="350">Lu</text></g>
473: 
474:   <!-- Markierungslinien fuer Lanthanoide -->
475:   <line class="la" x1="140" y1="251" x2="140" y2="279"/>
476:   <line class="la" x1="110" y1="331" x2="110" y2="359"/>
477:   <line class="la" x1="530" y1="331" x2="530" y2="359"/>
478: 
479:   <!-- 3. Nebengruppe Actinoide -->
480:   <g onclick="HoleDaten('Thorium')"><rect class="mn" x="110" y="370" width="30" height="30"/><text x="118" y="390">Th</text></g>
481:   <g onclick="HoleDaten('Protactinium')"><rect class="mn" x="140" y="370" width="30" height="30"/><text x="148" y="390">Pa</text></g>
482:   <g onclick="HoleDaten('Uranium')"><rect class="mn" x="170" y="370" width="30" height="30"/><text x="178" y="390">U</text></g>
483:   <g onclick="HoleDaten('Neptunium')"><rect class="mn" x="200" y="370" width="30" height="30"/><text x="208" y="390">Np</text></g>
484:   <g onclick="HoleDaten('Plutonium')"><rect class="mn" x="230" y="370" width="30" height="30"/><text x="238" y="390">Pu</text></g>
485:   <g onclick="HoleDaten('Americium')"><rect class="mn" x="260" y="370" width="30" height="30"/><text x="268" y="390">Am</text></g>
486:   <g onclick="HoleDaten('Curium')"><rect class="mn" x="290" y="370" width="30" height="30"/><text x="298" y="390">Cm</text></g>
487:   <g onclick="HoleDaten('Berkelium')"><rect class="mn" x="320" y="370" width="30" height="30"/><text x="328" y="390">Bk</text></g>
488:   <g onclick="HoleDaten('Californium')"><rect class="mn" x="350" y="370" width="30" height="30"/><text x="358" y="390">Cf</text></g>
489:   <g onclick="HoleDaten('Einsteinium')"><rect class="mn" x="380" y="370" width="30" height="30"/><text x="388" y="390">Es</text></g>
490:   <g onclick="HoleDaten('Fermium')"><rect class="mn" x="410" y="370" width="30" height="30"/><text x="418" y="390">Fm</text></g>
491:   <g onclick="HoleDaten('Mendelevium')"><rect class="mn" x="440" y="370" width="30" height="30"/><text x="448" y="390">Md</text></g>
492:   <g onclick="HoleDaten('Nobelium')"><rect class="mn" x="470" y="370" width="30" height="30"/><text x="478" y="390">No</text></g>
493:   <g onclick="HoleDaten('Lawrencium')"><rect class="mn" x="500" y="370" width="30" height="30"/><text x="508" y="390">Lr</text></g>
494: 
495:   <!-- Markierungslinien fuer Actinoide -->
496:   <line class="ac" x1="140" y1="281" x2="140" y2="309"/>
497:   <line class="ac" x1="110" y1="371" x2="110" y2="399"/>
498:   <line class="ac" x1="530" y1="371" x2="530" y2="399"/>
499: 
500:   <!-- Ausgabe-Box mit statischen und dynamischen Inhalten -->
501:   <rect x="200" y="430" rx="5" width="390" height="100"/>
502: 
503:   <a xlink:href="http://www.webservicex.net/WS/WSDetails.aspx?WSID=19&amp;CATID=7" target="_top">
504:     <text x="315" y="445" style="fill: #000; font-size: 12px; pointer-events: visible">
505:       Daten von WebserviceX.NET
506:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
507:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
508:         begin="mouseover"/>
509:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
510:       <set attributeName="text-decoration" attributeType="CSS" to="none"
511:         begin="mouseout"/>
512:     </text>
513:   </a>
514: 
515:   <!-- dynamische Daten Beschreibungen -->
516:   <class="daten1">
517:   <text x="205" y="465">Symbol:</text>
518:   <text x="205" y="480">ElementName:</text>
519:   <text x="205" y="495">AtomicNumber:</text>
520:   <text x="205" y="510">AtomicWeight:</text>
521:   <text x="205" y="525">AtomicRadius:</text>
522:   <text x="380" y="465">Density:</text>
523:   <text x="380" y="480">MeltingPoint:</text>
524:   <text x="380" y="495">BoilingPoint:</text>
525:   <text x="380" y="510">ElectroNegativity:</text>
526:   <text x="380" y="525">IonisationPotential:</text>
527:   </g>
528: 
529:   <!-- dynamische Daten Platzhalter -->
530:   <class="daten2">
531:   <text id="SYout" x="290" y="465"> </text>
532:   <text id="ENout" x="290" y="480"> </text>
533:   <text id="ANout" x="290" y="495"> </text>
534:   <text id="AWout" x="290" y="510"> </text>
535:   <text id="ARout" x="290" y="525"> </text>
536:   <text id="DEout" x="485" y="465"> </text>
537:   <text id="MPout" x="485" y="480"> </text>
538:   <text id="BPout" x="485" y="495"> </text>
539:   <text id="EYout" x="485" y="510"> </text>
540:   <text id="IPout" x="485" y="525"> </text>
541:   </g>
542: 
543:   <a xlink:href="ptable_php.txt" target="_top">
544:     <text x="35" y="530" style="fill: #000; font-size: 11px; pointer-events: visible">
545:       PHP-Script zur Datenabfrage
546:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
547:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
548:         begin="mouseover"/>
549:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
550:       <set attributeName="text-decoration" attributeType="CSS" to="none"
551:         begin="mouseout"/>
552:     </text>
553:   </a>
554: 
555: </svg>

[zum Anfang]