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 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-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;
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: visibility: hidden">sin(x)</text>
165: <text id="cos" x="330" y="300" style="fill: #F00; font-size: 16px;
166: visibility: hidden">cos(x)</text>
167: <text id="info" x="120" y="330" style="fill: #000; font-size: 12px;
168: visibility: hidden">[Hinweis: sin(x) als polyline erzeugt – cos(x)
169: punktweise mittels circle erzeugt.]</text>
170:
171: </svg>
[zum Anfang]
