SVG – Learning by Coding

[ rss-newsfeed.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="setTimeout('HoleDaten()',2000)">
 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:       a text
 23:       {
 24:         fill#00C;
 25:       }
 26: 
 27:       ]]>
 28:     </style>
 29: 
 30:     <script type="text/javascript">
 31:       <![CDATA[
 32: 
 33:       var svgdoc=svgDocument;
 34:       var svgroot=document.documentElement;
 35:       var xmldoc,anzahl,titel,datum,links;
 36:       var d=new Array(),l=new Array(),t=new Array();
 37:       var txt,textelement,textknoten,aelement;
 38:       var svgns="http://www.w3.org/2000/svg";
 39: 
 40:       svgroot.addEventListener("mouseover",LinkOver,false);
 41:       svgroot.addEventListener("mouseout",LinkOut,false);
 42: 
 43: 
 44:       function LinkOver(mouseover_evt)
 45:       {
 46:         // Funktion fuer mouseover-Events bei Texten in a-Elementen
 47: 
 48:         var objekt=mouseover_evt.target;
 49: 
 50:         if(objekt.parentNode.tagName=="a")
 51:         {
 52:           objekt.style.setProperty("fill","#F00","");
 53:           objekt.style.setProperty("text-decoration","underline","");
 54:         }
 55:       }
 56: 
 57: 
 58:       function LinkOut(mouseout_evt)
 59:       {
 60:         // Funktion fuer mouseout-Events bei Texten in a-Elementen
 61: 
 62:         var objekt=mouseout_evt.target;
 63: 
 64:         if(objekt.parentNode.tagName=="a")
 65:         {
 66:           objekt.style.setProperty("fill","#00C","");
 67:           objekt.style.setProperty("text-decoration","none","");
 68:         }
 69:       }
 70: 
 71: 
 72:       function HoleDaten()
 73:       {
 74:         getURL("rss-newsfeed.php",callback);
 75:       }
 76: 
 77: 
 78:       function callback(urlRequestStatus)
 79:       {
 80:         if(urlRequestStatus.success && urlRequestStatus.content!="Error!")
 81:         {
 82:           xmldoc=parseXML(urlRequestStatus.content).documentElement;
 83: 
 84:           if(xmldoc)
 85:           {
 86:             // Auslesen von item/title, item/dc:date und item/link
 87:             anzahl=xmldoc.getElementsByTagName("item").length;
 88:             titel=xmldoc.getElementsByTagName("title");
 89:             datum=xmldoc.getElementsByTagName("dc:date");
 90:             links=xmldoc.getElementsByTagName("link");
 91: 
 92:             // Beschraenkung auf max. 15 items (wegen Timing-Problemen)
 93:             if(anzahl>15)anzahl=15;
 94: 
 95:             for(i=0;i<anzahl;i++)
 96:             {
 97:               d[i]=datum.item(i).firstChild.nodeValue;
 98:               l[i]=links.item(i+1).firstChild.nodeValue;
 99:               t[i]=titel.item(i+1).firstChild.nodeValue;
100:             }
101: 
102:             Ausgabe();
103:           }
104:         }
105:         else
106:         {
107:           alert("Bei der Abfrage des RSS-Feeds\nist ein Fehler aufgetreten!");
108:         }
109:       }
110: 
111: 
112:       function Ausgabe()
113:       {
114:         for(i=0;i<anzahl;i++)
115:         {
116:           if(i<9)txt="[0"+parseInt(i+1)+"] "+d[i];
117:           else txt="["+parseInt(i+1)+"] "+d[i];
118:           textelement=svgdoc.createElementNS(svgns,"text");
119:           textelement.setAttribute("x","30");
120:           textelement.setAttribute("y",70+i*20);
121:           textknoten=svgdoc.createTextNode(txt);
122:           textelement.appendChild(textknoten);
123:           svgroot.appendChild(textelement);
124: 
125:           txt=l[i];
126:           aelement=svgdoc.createElementNS(svgns,"a");
127:           aelement.setAttributeNS("http://www.w3.org/1999/xlink","href",txt);
128:           aelement.setAttribute("target","_top");
129: 
130:           txt=t[i];
131:           textelement=svgdoc.createElementNS(svgns,"text");
132:           textelement.setAttribute("x","130");
133:           textelement.setAttribute("y",70+i*20);
134:           textknoten=svgdoc.createTextNode(txt);
135:           textelement.appendChild(textknoten);
136:           aelement.appendChild(textelement);
137:           svgroot.appendChild(aelement);
138:         }
139:       }
140: 
141:       ]]>
142:     </script>
143: 
144:   </defs>
145: 
146:   <a xlink:href="http://www.w3.org/Graphics/SVG/Overview.rss" target="_top">
147:     <text x="20" y="30" style="fill: #000; font-size: 24px">
148:       Abfrage des SVG-RSS-Newsfeeds vom W3C
149:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
150:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
151:         begin="mouseover"/>
152:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
153:       <set attributeName="text-decoration" attributeType="CSS" to="none"
154:         begin="mouseout"/>
155:     </text>
156:   </a>
157: 
158:   <line x1="122" y1="60" x2="122" y2="355"/>
159: 
160:   <a xlink:href="rss-newsfeed_php.txt" target="_top">
161:     <text x="30" y="390" style="fill: #000; font-size: 11px">
162:       PHP-Script zur Datenabfrage
163:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
164:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
165:         begin="mouseover"/>
166:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
167:       <set attributeName="text-decoration" attributeType="CSS" to="none"
168:         begin="mouseout"/>
169:     </text>
170:   </a>
171: 
172:   <a xlink:href="" cursor="pointer" onclick="return false">
173:     <text x="255" y="390" style="fill: #000; font-size: 11px"
174:       onclick="location.reload()">[Bei Timing-Problemen bitte Dokument neu laden!]
175:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
176:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
177:         begin="mouseover"/>
178:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
179:       <set attributeName="text-decoration" attributeType="CSS" to="none"
180:         begin="mouseout"/>
181:     </text>
182:   </a>
183: 
184: </svg>

[zum Anfang]