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 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-width: 1px
25: }
26:
27: g text
28: {
29: font-family: Arial,Helvetica,sans-serif;
30: font-size: 10px;
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")!=-1 && 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: Funktion: y = sin(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]
