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]
