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 11/05 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="Init(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-size: 12px;
24: font-family: sans-serif;
25: }
26:
27: .raster
28: {
29: fill: none;
30: stroke: #CCC;
31: stroke-dasharray: 0.5,49.5;
32: stroke-width: 500px;
33: }
34:
35: .achsen
36: {
37: stroke: #000;
38: stroke-width: 1px;
39: }
40:
41: g.info1 text
42: {
43: fill: #00C;
44: font-size: 16px;
45: }
46:
47: g.info2 text
48: {
49: fill: #00C;
50: font-size: 12px;
51: }
52:
53: ]]>
54: </style>
55:
56: <script type="text/javascript">
57: <![CDATA[
58:
59: var svgdoc,svgroot,d1=false,d2=false,f,a,b,fg,fl,ug,og,fi,xa,rb;
60: var x0=270,y0=300; // Koordinaten-Ursprung (0,0)
61: var gi=50; // Gitter-Schrittweite pro Einheit
62: var svgns="http://www.w3.org/2000/svg";
63:
64: // Funktionsgleichungen als Objekte
65: var f1=function(x){return (6*x-4)/(x*x-2*x+2);};
66: var f2=function(x){return (x*x-1)/(x*x+1);};
67: var f3=function(x){return (x+0.25)/(x*x*x*x+0.25);};
68: var f4=function(x){return 2*Math.sin(x)+Math.cos(2*x);};
69: var f5=function(x){return Math.sin(2*x)+Math.sin(x/2)+2*Math.sin(x);};
70:
71:
72: function Init(load_evt)
73: {
74: svgdoc=load_evt.target.ownerDocument;
75: svgroot=svgdoc.rootElement;
76:
77: fg=svgdoc.getElementById("fg"); // Funktionsgruppe
78: fl=svgdoc.getElementById("fl"); // Flaechengruppe
79: ug=svgdoc.getElementById("ug"); // untere Grenze
80: og=svgdoc.getElementById("og"); // obere Grenze
81: fi=svgdoc.getElementById("fi"); // Flaecheninhalt
82: xa=svgdoc.getElementById("xa"); // Gruppe x-Achse
83: rb=svgdoc.getElementById("rb"); // Radio-Button innen
84:
85: xa.addEventListener("click",Auswertung,false);
86: xa.addEventListener("mouseover",OverOutCol,false);
87: xa.addEventListener("mouseout",OverOutCol,false);
88:
89: GoFkt(f1);
90: }
91:
92:
93: function OverOutCol(mouse_evt)
94: {
95: var obj=mouse_evt.target;
96:
97: if(mouse_evt.type=="mouseover")obj.style.setProperty("fill","#F00","");
98: else if(mouse_evt.type=="mouseout")obj.style.setProperty("fill","#000","");
99: }
100:
101:
102: function GoFkt(fktobj)
103: {
104: f=fktobj;
105:
106: if(fg.hasChildNodes())fg.removeChild(fg.firstChild);
107: if(fl.hasChildNodes())fl.removeChild(fl.firstChild);
108:
109: d1=false;
110: d2=false;
111: ug.firstChild.nodeValue="a = ";
112: og.firstChild.nodeValue="b = ";
113: fi.firstChild.nodeValue="A = ";
114:
115: FktZeichnen();
116: }
117:
118:
119: function Auswertung(click_evt)
120: {
121: var obj=click_evt.target,temp,Awert;
122:
123: if(obj.hasChildNodes() && obj.firstChild.nodeType == 3)
124: {
125: if(!d1)
126: {
127: if(fl.hasChildNodes())fl.removeChild(fl.firstChild);
128: a=obj.firstChild.nodeValue*1;
129:
130: ug.firstChild.nodeValue="a = "+a;
131: og.firstChild.nodeValue="b = ";
132: fi.firstChild.nodeValue="A = ";
133: d1=true;
134: }
135: else if(!d2)
136: {
137: b=obj.firstChild.nodeValue*1;
138: og.firstChild.nodeValue="b = "+b;
139: d2=true;
140: }
141:
142: if(d1 && d2)
143: {
144: if(a>b)
145: {
146: temp=a;
147: a=b;
148: b=temp;
149: ug.firstChild.nodeValue="a = "+a;
150: og.firstChild.nodeValue="b = "+b;
151: }
152:
153: Awert=Integral(a,b);
154: fi.firstChild.nodeValue="A = "+Awert.toFixed(3)+" FE";
155: FlaecheZeichnen(a,b);
156:
157: d1=false;
158: d2=false;
159: }
160: }
161: }
162:
163:
164: function PolyPoints(s,z)
165: {
166: var x,y,i,points="";
167:
168: for(i=s;i<=z;i+=0.005)
169: {
170: x=i;
171: y=f(x);
172: x=x0+x*gi;
173: y=y0-y*gi;
174: points+=x+","+y+" ";
175: }
176:
177: return points;
178: }
179:
180:
181: function FktZeichnen()
182: {
183: var pp,pl;
184:
185: pp=PolyPoints(-5,5);
186:
187: pl=svgdoc.createElementNS(svgns,"polyline");
188: pl.setAttribute("points",pp);
189: pl.setAttribute("stroke","#F00");
190: pl.setAttribute("stroke-width","1px");
191: pl.setAttribute("fill","none");
192:
193: fg.appendChild(pl);
194: }
195:
196:
197: function FlaecheZeichnen(a,b)
198: {
199: var p1,p1,p3,pp,pg;
200:
201: p1=""+(x0+a*gi)+","+y0+" ";
202: p2=PolyPoints(a,b);
203: p3=""+(x0+b*gi)+","+y0;
204: pp=p1+p2+p3;
205:
206: pg=svgdoc.createElementNS(svgns,"polygon");
207: pg.setAttribute("points",pp);
208: pg.setAttribute("fill","#FFC");
209: pg.setAttribute("opacity","0.7");
210:
211: fl.appendChild(pg);
212: }
213:
214:
215: function Integral(a,b)
216: {
217: // numerische Integration nach dem SIMPSON-Verfahren:
218: // f=Funktion, a=untere Grenze, b=obere Grenze
219:
220: var x,y,h,i,ya,yb,yg=0,yu=0;
221: var n=10000; // Integrationsschritte (Genauigkeit)
222:
223: h=(b-a)/n;
224: x=a;
225: ya=f(x);
226: x=b;
227: yb=f(x);
228:
229: for(i=1;i<n;i++)
230: {
231: x=a+i*h;
232: y=f(x);
233: // hier wird der Betrag der Gesamtflaeche ermittelt,
234: // fuer Integralwert Zeile mit Math.abs() weglassen!
235: y=Math.abs(y);
236: if(i%2==0)yg+=y;
237: else yu+=y;
238: }
239:
240: return h/3*(ya+4*yu+2*yg+yb);
241: }
242:
243:
244: function SetRadio(click_evt)
245: {
246: rb.setAttribute("cx",click_evt.target.getAttribute("cx"));
247: rb.setAttribute("cy",click_evt.target.getAttribute("cy"));
248: }
249:
250: ]]>
251: </script>
252:
253: </defs>
254:
255: <text x="20" y="30" style="fill: #000; font-size: 24px">
256: Fläche unter einer Kurve bestimmen (Integration)</text>
257:
258: <!-- Gruppe fuer berechnetes Flaechen-Polygon -->
259: <g id="fl"></g>
260:
261: <!-- Raster -->
262: <line x1="20" y1="300" x2="521" y2="300" class="raster"/>
263: <line x1="270" y1="50" x2="270" y2="551" class="raster"/>
264:
265: <!-- Achsen -->
266: <line x1="20" y1="300" x2="520" y2="300" class="achsen"/>
267: <line x1="270" y1="50" x2="270" y2="550" class="achsen"/>
268:
269: <!-- Gruppe fuer berechnete Funktions-Polylinie -->
270: <g id="fg"></g>
271:
272: <!-- Achsen-Beschriftung x-Achse mit Gruppe fuer anklickbare Texte -->
273: <a xlink:href="" cursor="pointer" onclick="return false">
274: <g id="xa" style="cursor: pointer">
275: <text x="65" y="313">-4</text>
276: <text x="115" y="313">-3</text>
277: <text x="165" y="313">-2</text>
278: <text x="215" y="313">-1</text>
279: <text x="260" y="313">0</text>
280: <text x="317" y="313">1</text>
281: <text x="367" y="313">2</text>
282: <text x="417" y="313">3</text>
283: <text x="467" y="313">4</text>
284: </g>
285: </a>
286: <text x="515" y="313" style="font-weight: bold">x</text>
287:
288: <!-- Achsen-Beschriftung y-Achse -->
289: <text x="260" y="105">4</text>
290: <text x="260" y="155">3</text>
291: <text x="260" y="205">2</text>
292: <text x="260" y="255">1</text>
293: <text x="257" y="355">-1</text>
294: <text x="257" y="405">-2</text>
295: <text x="257" y="455">-3</text>
296: <text x="257" y="505">-4</text>
297: <text x="257" y="60" style="font-weight: bold">y</text>
298:
299: <!-- Achsen-Pfeilspitzen -->
300: <polygon points="267,60 270,50 273,60" style="fill: #000"/>
301: <polygon points="510,297 520,300 510,303" style="fill: #000"/>
302:
303: <!-- Radio-Buttons -->
304: <g style="fill: none; stroke: #00C; pointer-events: all">
305: <circle id="rb" cx="30" cy="65" r="2" style="fill: #F00; stroke: none"/>
306: <circle cx="30" cy="65" r="5" onclick="SetRadio(evt);GoFkt(f1)"/>
307: <circle cx="30" cy="95" r="5" onclick="SetRadio(evt);GoFkt(f2)"/>
308: <circle cx="30" cy="125" r="5" onclick="SetRadio(evt);GoFkt(f3)"/>
309: <circle cx="30" cy="155" r="5" onclick="SetRadio(evt);GoFkt(f4)"/>
310: <circle cx="30" cy="185" r="5" onclick="SetRadio(evt);GoFkt(f5)"/>
311: </g>
312:
313: <!-- sonstige beschreibende Texte -->
314: <g class="info1">
315: <text x="40" y="70">y = (6x - 4) / (x^2 - 2x + 2)</text>
316: <text x="40" y="100">y = (x^2 - 1) / (x^2 + 1)</text>
317: <text x="40" y="130">y = (x + 1/4) / (x^4 + 1/4)</text>
318: <text x="40" y="160">y = 2sin(x) + cos(2x)</text>
319: <text x="40" y="190">y = sin(2x) + sin(x/2) + 2sin(x)</text>
320: </g>
321:
322: <g class="info2">
323: <text id="ug" x="375" y="415">a =</text>
324: <text id="og" x="375" y="430">b =</text>
325: <text id="fi" x="375" y="445">A =</text>
326: <text x="272" y="465">
327: (a,b = Integrationsgrenzen, A = Gesamtfläche)</text>
328: <text x="292" y="490" style="fill: #000">
329: x-Werte für a bzw. b jeweils anklicken!</text>
330: </g>
331:
332: </svg>
[zum Anfang]