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="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]
