SVG – Learning by Coding

[ parsexml_gzip.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 01/05 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(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:       line
 22:       {
 23:         stroke#000;
 24:         stroke-width1px
 25:       }
 26: 
 27:       g text
 28:       {
 29:         font-familyArial,Helvetica,sans-serif;
 30:         font-size10px;
 31:       }
 32: 
 33:       ]]>
 34:     </style>
 35: 
 36: 
 37:     <script type="text/javascript">
 38:       <![CDATA[
 39: 
 40:       var svgdoc,svgroot,xmldoc,xdaten,ydaten,anzahl,ver="";
 41: 
 42: 			
 43:       function getSVGDoc(load_evt)
 44:       {
 45:         svgdoc=load_evt.target.ownerDocument;
 46:         svgroot=svgdoc.documentElement;
 47:         if(window.getSVGViewerVersion)ver=getSVGViewerVersion();
 48:       }
 49: 
 50: 
 51:       function XMLDaten()
 52:       {
 53:         if(ver.indexOf("Adobe")!=-&& window.getURL)getURL("xmldaten.svgz",callback);
 54:         else alert("Diese Technik ist nicht verfuegbar!");
 55:       }
 56: 
 57: 
 58:       function callback(urlRequestStatus)
 59:       {
 60:         if(urlRequestStatus.success)
 61:         {
 62:           xmldoc=parseXML(urlRequestStatus.content);
 63:           xdaten=xmldoc.getElementsByTagName("x");
 64:           ydaten=xmldoc.getElementsByTagName("y");
 65:           anzahl=xdaten.length;
 66:           if(anzahl==ydaten.length)FunktionZeichnen();
 67:         }
 68:       }
 69: 
 70: 
 71:       function FunktionZeichnen()
 72:       {
 73:         var startx=300,starty=200,fx=10,fy=50,x,y,wertepaar="",punkte="",elemobj,
 74:             svgns="http://www.w3.org/2000/svg";
 75: 
 76:         // x,y-Daten grafisch darstellen - Daten aufbereiten
 77:         for(i=0;i<anzahl;i+=10)
 78:         {
 79:           x=xdaten.item(i).firstChild.nodeValue;
 80:           y=ydaten.item(i).firstChild.nodeValue;
 81: 
 82:           wertepaar=(startx+x*fx).toString()+","+(starty-y*fy).toString()+" ";
 83:           punkte+=wertepaar;
 84:         }
 85: 
 86:         // Funktionsgraph mittels polyline erzeugen
 87:         elemobj=svgdoc.createElementNS(svgns,"polyline");
 88:         elemobj.setAttribute("points",punkte);
 89:         elemobj.setAttribute("stroke","#090");
 90:         elemobj.setAttribute("stroke-width","1.5px");
 91:         elemobj.setAttribute("fill","none");
 92:         svgroot.appendChild(elemobj);   
 93: 
 94:         // Link bzw. Text aus-/einblenden
 95:         svgdoc.getElementById("aktion").style.setProperty("visibility","hidden","");
 96:         svgdoc.getElementById("info").style.setProperty("visibility","visible","");
 97:       }
 98: 
 99:       ]]>
100:     </script>
101: 
102:   </defs>
103: 
104:   <text x="20" y="30" style="fill: #000; font-size: 24px">
105:     parseXML()</text>
106:   <text x="20" y="50" style="fill: #000; font-size: 14px">
107:     mit GZip-komprimierten Daten (svgz)</text>
108: 
109:   <!-- Achsen -->
110:   <line x1="50" y1="200" x2="547" y2="200"/>
111:   <line x1="300" y1="50" x2="300" y2="350"/>
112:   <line x1="540" y1="195" x2="550" y2="200"/>
113:   <line x1="540" y1="205" x2="550" y2="200"/>
114:   <line x1="295" y1="60" x2="300" y2="50"/>
115:   <line x1="300" y1="50" x2="305" y2="60"/>
116: 
117:   <!-- Achsenteilung x -->
118:   <g>
119:     <line x1="100" y1="200" x2="100" y2="205"/>
120:     <line x1="150" y1="200" x2="150" y2="205"/>
121:     <line x1="200" y1="200" x2="200" y2="205"/>
122:     <line x1="250" y1="200" x2="250" y2="205"/>
123:     <line x1="350" y1="200" x2="350" y2="205"/>
124:     <line x1="400" y1="200" x2="400" y2="205"/>
125:     <line x1="450" y1="200" x2="450" y2="205"/>
126:     <line x1="500" y1="200" x2="500" y2="205"/>
127: 
128:     <text x="93" y="215">-20</text>
129:     <text x="143" y="215">-15</text>
130:     <text x="193" y="215">-10</text>
131:     <text x="243" y="215">-5</text>
132:     <text x="347" y="215">5</text>
133:     <text x="395" y="215">10</text>
134:     <text x="445" y="215">15</text>
135:     <text x="495" y="215">20</text>
136:     <text x="555" y="203" style="font-size: 12px">x</text>
137:   </g>
138: 
139:   <!-- Achsenteilung y -->
140:   <g>
141:     <line x1="295" y1="100" x2="300" y2="100"/>
142:     <line x1="295" y1="150" x2="300" y2="150"/>
143:     <line x1="295" y1="250" x2="300" y2="250"/>
144:     <line x1="295" y1="300" x2="300" y2="300"/>
145: 
146:     <text x="297" y="40" style="font-size: 12px">y</text>
147:     <text x="287" y="103">2</text>
148:     <text x="287" y="153">1</text>
149:     <text x="284" y="253">-1</text>
150:     <text x="284" y="303">-2</text>
151:   </g>
152: 
153:   <g id="aktion">
154:     <a xlink:href="" cursor="pointer" onclick="return false">
155:       <text x="185" y="380" style="fill: #00C; font-size: 14px"
156:         onclick="XMLDaten()">XML-Daten laden Funktion zeichnen
157:         <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
158:         <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
159:       </text>
160:     </a>
161:   </g>
162: 
163:   <g id="info" style="visibility: hidden">
164:     <text x="210" y="380" style="fill: #00C; font-size: 14px">
165:       Funktionsin(2 x) + 2 sin(x)
166:     </text>
167:   </g>
168: 
169:   <text x="100" y="390" style="fill: #F00; font-size: 12px">
170:     <tspan x="100" dy="16">Es werden 200 KB komprimierte XML-Daten geladen
171:       (unkomprimiert 1.2 MB).</tspan>
172:     <tspan x="100" dy="16">Von den 44000 x,y-Datensätzen werden 4400 Paare
173:       mittels polyline-Element</tspan>
174:     <tspan x="100" dy="16">grafisch dargestellt.</tspan>
175:   </text>
176: 
177: </svg>

[zum Anfang]