SVG – Learning by Coding

[ funktion_integrieren.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 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-size12px;
 24:       font-familysans-serif;
 25:     }
 26: 
 27:     .raster
 28:     {
 29:       fillnone;
 30:       stroke#CCC;
 31:       stroke-dasharray0.5,49.5;
 32:       stroke-width500px;
 33:     }
 34: 
 35:     .achsen
 36:     {
 37:       stroke#000;
 38:       stroke-width1px;
 39:     }
 40: 
 41:     g.info1 text
 42:     {
 43:       fill#00C;
 44:       font-size16px;
 45:     }
 46: 
 47:     g.info2 text
 48:     {
 49:       fill#00C;
 50:       font-size12px;
 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:   <class="info1">
315:     <text x="40" y="70">= (6x 4) / (x^2x 2)</text>
316:     <text x="40" y="100">= (x^1) / (x^1)</text>
317:     <text x="40" y="130">= (1/4) / (x^1/4)</text>
318:     <text x="40" y="160">2sin(x) + cos(2x)</text>
319:     <text x="40" y="190">sin(2x) + sin(x/2) + 2sin(x)</text>
320:   </g>
321: 
322:   <class="info2">
323:     <text id="ug" x="375" y="415">=</text>
324:     <text id="og" x="375" y="430">=</text>
325:     <text id="fi" x="375" y="445">=</text>
326:     <text x="272" y="465">
327:       (a,IntegrationsgrenzenGesamtfläche)</text>
328:     <text x="292" y="490" style="fill: #000">
329:       x-Werte für a bzwb jeweils anklicken!</text>
330:   </g>
331: 
332: </svg>

[zum Anfang]