SVG – Learning by Coding

[ funktionsplotter.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 05/03 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;
 41: 
 42: 			
 43:       function getSVGDoc(load_evt)
 44:       {
 45:         svgdoc=load_evt.target.ownerDocument;
 46:         svgroot=svgdoc.documentElement;
 47:       }
 48: 
 49: 
 50:       function FunktionenZeichnen()
 51:       {
 52:         var startx=50,starty=200,faktor=50,x,y,wertepaar="",punkte="",elemobj,
 53:             svgns="http://www.w3.org/2000/svg";
 54: 
 55:         // Sinus-Funktion zeichnen
 56: 
 57:         // Wertepaare berechnen
 58:         for(x=0;x<=10;x+=0.01)
 59:         {
 60:           y=Math.sin(x);
 61: 
 62:           wertepaar=(startx+x*faktor).toString()+","+(starty-y*faktor).toString()+" ";
 63:           punkte+=wertepaar;
 64:         }
 65: 
 66:         // Sinus-Funktionsgraph mittels polyline erzeugen
 67:         elemobj=svgdoc.createElementNS(svgns,"polyline");
 68:         elemobj.setAttribute("points",punkte);
 69:         elemobj.setAttribute("stroke","#090");
 70:         elemobj.setAttribute("stroke-width","1.5px");
 71:         elemobj.setAttribute("fill","none");
 72:         svgroot.appendChild(elemobj);   
 73: 
 74: 
 75:         // Cosinus-Funktion zeichnen
 76: 
 77:         // Wertepaare berechnen und
 78:         // Cosinus-Funktionsgraph punktweise mittels circle erzeugen
 79:         for(x=0;x<=10;x+=0.01)
 80:         {
 81:           y=Math.cos(x);
 82: 
 83:           elemobj=svgdoc.createElementNS(svgns,"circle");
 84:           elemobj.setAttribute("cx",(startx+x*faktor).toString());
 85:           elemobj.setAttribute("cy",(starty-y*faktor).toString());
 86:           elemobj.setAttribute("r","0.75");
 87:           elemobj.setAttribute("fill","#F00");
 88:           svgroot.appendChild(elemobj);
 89:         }
 90: 
 91: 
 92:         // versteckte Hinweistexte einblenden
 93:         svgdoc.getElementById("sin").style.setProperty("visibility","visible","");
 94:         svgdoc.getElementById("cos").style.setProperty("visibility","visible","");
 95:         svgdoc.getElementById("info").style.setProperty("visibility","visible","");
 96:         svgdoc.getElementById("aktion").style.setProperty("visibility","hidden","");
 97:       }
 98: 
 99:       ]]>
100:     </script>
101: 
102:   </defs>
103: 
104:   <text x="20" y="30" style="fill: #000; font-size: 24px">
105:     Funktions-Plotter</text>
106: 
107:   <!-- Achsen -->
108:   <line x1="50" y1="200" x2="600" y2="200"/>
109:   <line x1="50" y1="100" x2="50" y2="300"/>
110:   <line x1="590" y1="195" x2="600" y2="200"/>
111:   <line x1="590" y1="205" x2="600" y2="200"/>
112:   <line x1="45" y1="110" x2="50" y2="100"/>
113:   <line x1="50" y1="100" x2="55" y2="110"/>
114: 
115:   <!-- Achsenteilung x -->
116:   <g>
117:     <line x1="100" y1="200" x2="100" y2="205"/>
118:     <line x1="150" y1="200" x2="150" y2="205"/>
119:     <line x1="200" y1="200" x2="200" y2="205"/>
120:     <line x1="250" y1="200" x2="250" y2="205"/>
121:     <line x1="300" y1="200" x2="300" y2="205"/>
122:     <line x1="350" y1="200" x2="350" y2="205"/>
123:     <line x1="400" y1="200" x2="400" y2="205"/>
124:     <line x1="450" y1="200" x2="450" y2="205"/>
125:     <line x1="500" y1="200" x2="500" y2="205"/>
126:     <line x1="550" y1="200" x2="550" y2="205"/>
127: 
128:     <text x="97" y="215">1</text>
129:     <text x="147" y="215">2</text>
130:     <text x="197" y="215">3</text>
131:     <text x="247" y="215">4</text>
132:     <text x="297" y="215">5</text>
133:     <text x="347" y="215">6</text>
134:     <text x="397" y="215">7</text>
135:     <text x="447" y="215">8</text>
136:     <text x="497" y="215">9</text>
137:     <text x="544" y="215">10</text>
138:     <text x="605" y="203">x</text>
139:   </g>
140: 
141:   <!-- Achsenteilung y -->
142:   <g>
143:     <line x1="45" y1="150" x2="50" y2="150"/>
144:     <line x1="45" y1="200" x2="50" y2="200"/>
145:     <line x1="45" y1="250" x2="50" y2="250"/>
146: 
147:     <text x="47" y="90">y</text>
148:     <text x="37" y="153">1</text>
149:     <text x="37" y="203">0</text>
150:     <text x="34" y="253">-1</text>
151:   </g>
152: 
153:   <g id="aktion">
154:     <a xlink:href="" cursor="pointer" onclick="return false">
155:       <text x="100" y="300" style="fill: #00C; font-size: 16px"
156:         onclick="FunktionenZeichnen()">Funktionen 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:   <text id="sin" x="270" y="300" style="fill: #090; font-size: 16px;
164:     visibilityhidden">sin(x)</text>
165:   <text id="cos" x="330" y="300" style="fill: #F00; font-size: 16px;
166:     visibilityhidden">cos(x)</text>
167:   <text id="info" x="120" y="330" style="fill: #000; font-size: 12px;
168:     visibilityhidden">[Hinweis: sin(x) als polyline erzeugt &#8211; cos(x)
169:     punktweise mittels circle erzeugt.]</text>
170: 
171: </svg>

[zum Anfang]