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 03/04 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="InitArr();SVGObjectDetails(0,evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30: <script type="text/javascript">
31: <![CDATA[
32:
33: var ausgabe=new Array(6),roezahl=new Array(5),anzahl,clipdata,oldnr=0; // global
34:
35:
36: function SVGObjectDetails(nr,evt)
37: {
38: var testobj,testinf,pm,pmarr,objtype,tsanzahl,ts,i,j; // lokal
39: var svgns="http://www.w3.org/2000/svg";
40:
41: pmarr=new Array(); // pmarr sammelt properties bzw. methods von testobj
42:
43: // zu testendes Objekt zuweisen
44: switch(nr)
45: {
46: case 0:
47: testobj=evt;
48: testinf="evt";
49: break;
50: case 1:
51: testobj=window;
52: testinf="window";
53: break;
54: case 2:
55: testobj=window.top; // im CSV nicht verfuegbar
56: testinf="window.top";
57: break;
58: case 3:
59: testobj=document; // oder svgDocument im ASV
60: testinf="document";
61: break;
62: case 4:
63: testobj=document.rootElement;
64: testinf="document.rootElement";
65: break;
66: case 5:
67: testobj=navigator; // im CSV nicht verfuegbar
68: testinf="navigator";
69: break;
70: case 6:
71: testobj=document.rootElement.style; // im CSV undefined
72: testinf="document.rootElement.style";
73: break;
74: case 7:
75: testobj=document.rootElement.attributes;
76: testinf="document.rootElement.attributes";
77: break;
78: case 8:
79: testobj=document.rootElement.childNodes;
80: testinf="document.rootElement.childNodes";
81: break;
82: case 9:
83: testobj=document.rootElement.currentTranslate;
84: testinf="document.rootElement.currentTranslate";
85: break;
86: case 10:
87: testobj=document.rootElement.getBBox;
88: testinf="document.rootElement.getBBox";
89: break;
90: case 11:
91: testobj=document.rootElement.getCTM;
92: testinf="document.rootElement.getCTM";
93: break;
94: case 12:
95: testobj=document.rootElement.getScreenCTM; // im ASV3 und CSV undefined
96: testinf="document.rootElement.getScreenCTM";
97: break;
98: case 13:
99: testobj=document.getElementById("testrect");
100: testinf="rect element";
101: break;
102: case 14:
103: testobj=document.getElementById("testcircle");
104: testinf="circle element";
105: break;
106: case 15:
107: testobj=document.getElementById("testline");
108: testinf="line element";
109: break;
110: case 16:
111: testobj=document.getElementById("testpath");
112: testinf="path element";
113: break;
114: case 17:
115: testobj=document.getElementById("testtext");
116: testinf="text element";
117: break;
118: case 18:
119: testobj=document.getElementById("testtext").firstChild;
120: testinf="text node";
121: break;
122: case 19:
123: testobj=document.getElementById("testlink");
124: testinf="a element";
125: break;
126: case 20:
127: testobj=document.getElementById("testanimation");
128: testinf="animation element";
129: break;
130: default:
131: alert("Aufruf der Funktion:\nSVGObjectDetails(nr[,evt])");
132: return;
133: break;
134: }
135:
136: // aktuelle Testnummer rot, vorherige blau markieren
137: document.getElementById("opt"+oldnr).setAttribute("fill","#00C");
138: document.getElementById("opt"+nr).setAttribute("fill","#F00");
139: oldnr=nr;
140:
141: // vorherige Textausgabe loeschen
142: for(i=1;i<=5;i++)
143: {
144: if(ausgabe[i].hasChildNodes())
145: {
146: tsanzahl=ausgabe[i].childNodes.length;
147: for(j=0;j<tsanzahl;j++)ausgabe[i].removeChild(ausgabe[i].lastChild);
148: }
149: }
150:
151: // roemische Zahlen verstecken und blau faerben
152: for(i=1;i<=5;i++)
153: {
154: ausgabe[i].setAttribute("visibility","hidden");
155: roezahl[i].setAttribute("visibility","hidden");
156: roezahl[i].setAttribute("fill","#00C");
157: }
158:
159: // Objektdetails ermitteln
160: for(pm in testobj)
161: {
162: // selbst definierte Bezeichner ausschließen
163: if(pm.indexOf("SVGObjectDetails")==-1 &&
164: pm.indexOf("Copy2Clipboard")==-1 &&
165: pm.indexOf("InitArr")==-1 &&
166: pm.toLowerCase().indexOf("ausgabe")==-1 &&
167: pm.indexOf("zahl")==-1 && pm!="oldnr" &&
168: pm!="i" && pm!="j" && pm!="clipdata")
169: {
170: objtype=typeof(testobj[pm]);
171: pm+=(objtype!="unknown" && objtype!="undefined")
172: ? " ("+objtype+" "+testobj[pm]+")" : "()";
173: pmarr.push(pm);
174: }
175: }
176:
177: anzahl=pmarr.length;
178:
179: if(anzahl>0)pmarr=pmarr.sort();
180:
181: // fuer IE: Ergebnisdaten fuer die Zwischenablage vorbereiten
182: if(window.top && window.top.clipboardData && anzahl>0)
183: clipdata=testinf+" "+testobj+" {"+anzahl+"}\r\n\r\n"+pmarr.join("\r\n");
184:
185: // Daten direkt ausgeben
186: ausgabe[0].firstChild.nodeValue=testinf+" "+testobj+" {"+anzahl+"}";
187:
188: if(anzahl>0)
189: {
190: for(i=0;i<anzahl;i++)
191: {
192: ts=document.createElementNS(svgns,"tspan");
193: ts.setAttribute("x","20");
194: ts.setAttribute("dy","14");
195: ts.appendChild(document.createTextNode(pmarr[i]));
196:
197: if(i<20)ausgabe[1].appendChild(ts);
198: if(i>=20 && i<40)ausgabe[2].appendChild(ts);
199: if(i>=40 && i<60)ausgabe[3].appendChild(ts);
200: if(i>=60 && i<80)ausgabe[4].appendChild(ts);
201: if(i>=80)ausgabe[5].appendChild(ts);
202: }
203: }
204:
205: if(i<20)ausgabe[1].setAttribute("visibility","visible");
206: if(i>20)
207: {
208: roezahl[1].setAttribute("visibility","visible");
209: roezahl[1].setAttribute("fill","#F00");
210: roezahl[2].setAttribute("visibility","visible");
211: }
212: if(i>40)roezahl[3].setAttribute("visibility","visible");
213: if(i>60)roezahl[4].setAttribute("visibility","visible");
214: if(i>80)roezahl[5].setAttribute("visibility","visible");
215:
216: Ausgabe(1);
217: }
218:
219:
220: function InitArr()
221: {
222: // Textbloecke zur Ausgabe der Teilergebnisse (0=Ueberschrift)
223: ausgabe[0]=document.getElementById("ausgabe0");
224: ausgabe[1]=document.getElementById("ausgabe1");
225: ausgabe[2]=document.getElementById("ausgabe2");
226: ausgabe[3]=document.getElementById("ausgabe3");
227: ausgabe[4]=document.getElementById("ausgabe4");
228: ausgabe[5]=document.getElementById("ausgabe5");
229:
230: // roemische Zahlen I bis V zur Steuerung der Teilergebnisse
231: roezahl[1]=document.getElementById("roezahl1");
232: roezahl[2]=document.getElementById("roezahl2");
233: roezahl[3]=document.getElementById("roezahl3");
234: roezahl[4]=document.getElementById("roezahl4");
235: roezahl[5]=document.getElementById("roezahl5");
236: }
237:
238:
239: function Ausgabe(nr)
240: {
241: for(i=1;i<=5;i++)
242: {
243: if(nr==i)
244: {
245: ausgabe[i].setAttribute("visibility","visible");
246: roezahl[i].setAttribute("fill","#F00");
247: }
248: else
249: {
250: ausgabe[i].setAttribute("visibility","hidden");
251: roezahl[i].setAttribute("fill","#00C");
252: }
253: }
254: }
255:
256:
257: function Copy2Clipboard()
258: {
259: // fuer IE: Ergebnisdaten in die Zwischenablage schreiben
260: if(window.top && window.top.clipboardData && anzahl>0)
261: {
262: window.top.clipboardData.setData("Text",clipdata);
263: alert("Ergebnisdaten wurden in die\nZwischenablage geschrieben.");
264: }
265: else alert("Kein Clipboard-Objekt vorhanden\noder kein Testergebnis erhalten.");
266: }
267:
268: ]]>
269: </script>
270:
271: </defs>
272:
273: <text x="20" y="30" style="fill: #000; font-size: 24px">
274: Analyse von SVG-Objekten [ASV/CSV]</text>
275:
276: <!--
277: Gruppe mit unsichtbaren, aber im DOM-Baum verfuegbaren Elementen
278: fuer die Tests 13 bis 20
279: -->
280: <g display="none">
281: <rect id="testrect" x="100" y="100" width="150" height="75"/>
282: <circle id="testcircle" cx="200" cy="100" r="20"/>
283: <line id="testline" x1="20" y1="20" x2="20" y2="200"/>
284: <text id="testtext" x="20" y="20">Text</text>
285: <path id="testpath" d="M 50,50 L 50 100"/>
286: <a id="testlink" xlink:href="http://svglbc.datenverdrahten.de">
287: <text id="test3" x="20" y="20">Text</text>
288: </a>
289: <ellipse cx="200" cy="100" rx="30" ry="10">
290: <animate id="testanimation" begin="0s"
291: attributeName="cx" from="200" to="300" dur="3s"/>
292: </ellipse>
293: </g>
294:
295: <!-- Test-Auswahl 0 (onload) bis 20 -->
296: <a xlink:href="" cursor="pointer" onclick="return false">
297: <text x="5" y="60" fill="#00C" cursor="pointer">
298: <tspan dx="15" y="60" font-size="16px" onclick="SVGObjectDetails()">
299: SVGObjectDetails:</tspan>
300: <tspan id="opt0" dx="6" onclick="SVGObjectDetails(0,evt)">0</tspan>
301: <tspan id="opt1" dx="6" onclick="SVGObjectDetails(1)">1</tspan>
302: <tspan id="opt2" dx="6" onclick="SVGObjectDetails(2)">2</tspan>
303: <tspan id="opt3" dx="6" onclick="SVGObjectDetails(3)">3</tspan>
304: <tspan id="opt4" dx="6" onclick="SVGObjectDetails(4)">4</tspan>
305: <tspan id="opt5" dx="6" onclick="SVGObjectDetails(5)">5</tspan>
306: <tspan id="opt6" dx="6" onclick="SVGObjectDetails(6)">6</tspan>
307: <tspan id="opt7" dx="6" onclick="SVGObjectDetails(7)">7</tspan>
308: <tspan id="opt8" dx="6" onclick="SVGObjectDetails(8)">8</tspan>
309: <tspan id="opt9" dx="6" onclick="SVGObjectDetails(9)">9</tspan>
310: <tspan id="opt10" dx="6" onclick="SVGObjectDetails(10)">10</tspan>
311: <tspan id="opt11" dx="6" onclick="SVGObjectDetails(11)">11</tspan>
312: <tspan id="opt12" dx="6" onclick="SVGObjectDetails(12)">12</tspan>
313: <tspan id="opt13" dx="6" onclick="SVGObjectDetails(13)">13</tspan>
314: <tspan id="opt14" dx="6" onclick="SVGObjectDetails(14)">14</tspan>
315: <tspan id="opt15" dx="6" onclick="SVGObjectDetails(15)">15</tspan>
316: <tspan id="opt16" dx="6" onclick="SVGObjectDetails(16)">16</tspan>
317: <tspan id="opt17" dx="6" onclick="SVGObjectDetails(17)">17</tspan>
318: <tspan id="opt18" dx="6" onclick="SVGObjectDetails(18)">18</tspan>
319: <tspan id="opt19" dx="6" onclick="SVGObjectDetails(19)">19</tspan>
320: <tspan id="opt20" dx="6" onclick="SVGObjectDetails(20)">20</tspan>
321: </text>
322: </a>
323:
324: <!-- Nummerierte Links fuer die Ausgabe von max. 20 Teilergebnissen -->
325: <a xlink:href="" cursor="pointer" onclick="return false">
326: <text x="20" y="410" fill="#00C" cursor="pointer">
327: <tspan fill="#090" onclick="Copy2Clipboard()">Copy (IE)</tspan>
328: <tspan id="roezahl1" dx="6" visibility="hidden" onclick="Ausgabe(1)">I</tspan>
329: <tspan id="roezahl2" dx="6" visibility="hidden" onclick="Ausgabe(2)">II</tspan>
330: <tspan id="roezahl3" dx="6" visibility="hidden" onclick="Ausgabe(3)">III</tspan>
331: <tspan id="roezahl4" dx="6" visibility="hidden" onclick="Ausgabe(4)">IV</tspan>
332: <tspan id="roezahl5" dx="6" visibility="hidden" onclick="Ausgabe(5)">V</tspan>
333: </text><!-- Hinweis: CSV wendet visibility nicht auf tspan-Elemente an -->
334: </a>
335:
336: <!-- Ausgabe der Ergebnisse -->
337: <text id="ausgabe0" x="20" y="90" visibility="visible" fill="#F00"> </text>
338: <text id="ausgabe1" x="20" y="100" visibility="visible"></text>
339: <text id="ausgabe2" x="20" y="100" visibility="hidden"></text>
340: <text id="ausgabe3" x="20" y="100" visibility="hidden"></text>
341: <text id="ausgabe4" x="20" y="100" visibility="hidden"></text>
342: <text id="ausgabe5" x="20" y="100" visibility="hidden"></text>
343:
344: <!--
345: Hinweis fuer CSV-Anwender: Beim Anklicken der Links in der eingebundenen Grafik
346: verschwinden alle Inhalte. Es empfiehlt sich daher das lokale Speichern und Testen.
347: -->
348:
349: </svg>
[zum Anfang]
