SVG – Learning by Coding

[ object_details.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 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-familysans-serif;
 24:         font-size12px;
 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")==-&&
164:              pm.indexOf("Copy2Clipboard")==-&&
165:              pm.indexOf("InitArr")==-&&
166:              pm.toLowerCase().indexOf("ausgabe")==-&&
167:              pm.indexOf("zahl")==-&& 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 unsichtbarenaber 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 (onloadbis 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 max20 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><!-- HinweisCSV 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-AnwenderBeim Anklicken der Links in der eingebundenen Grafik
346:     verschwinden alle InhalteEs empfiehlt sich daher das lokale Speichern und Testen.
347:   -->
348: 
349: </svg>

[zum Anfang]