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 01/05 - 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,xmldoc,xdaten,ydaten,anzahl,ver="";
41: 42: 43:
function getSVGDoc(load_evt)
44:
{
45:
svgdoc=load_evt.target.ownerDocument;
46:
svgroot=svgdoc.documentElement;
47:
if(window.getSVGViewerVersion)ver=getSVGViewerVersion();
48:
}
49: 50: 51:
function XMLDaten()
52:
{
53:
if(ver.indexOf("Adobe")!=-1 && window.getURL)getURL("xmldaten.svgz",callback);
54:
else alert("Diese Technik ist nicht verfuegbar!");
55:
}
56: 57: 58:
function callback(urlRequestStatus)
59:
{
60:
if(urlRequestStatus.success)
61:
{
62:
xmldoc=parseXML(urlRequestStatus.content);
63:
xdaten=xmldoc.getElementsByTagName("x");
64:
ydaten=xmldoc.getElementsByTagName("y");
65:
anzahl=xdaten.length;
66:
if(anzahl==ydaten.length)FunktionZeichnen();
67:
}
68:
}
69: 70: 71:
function FunktionZeichnen()
72:
{
73:
var startx=300,starty=200,fx=10,fy=50,x,y,wertepaar="",punkte="",elemobj,
74:
svgns="http://www.w3.org/2000/svg";
75: 76:
// x,y-Daten grafisch darstellen - Daten aufbereiten
77:
for(i=0;i<anzahl;i+=10)
78:
{
79:
x=xdaten.item(i).firstChild.nodeValue;
80:
y=ydaten.item(i).firstChild.nodeValue;
81: 82:
wertepaar=(startx+x*fx).toString()+","+(starty-y*fy).toString()+" ";
83:
punkte+=wertepaar;
84:
}
85: 86:
// Funktionsgraph mittels polyline erzeugen
87:
elemobj=svgdoc.createElementNS(svgns,"polyline");
88:
elemobj.setAttribute("points",punkte);
89:
elemobj.setAttribute("stroke","#090");
90:
elemobj.setAttribute("stroke-width","1.5px");
91:
elemobj.setAttribute("fill","none");
92:
svgroot.appendChild(elemobj);
93: 94:
// Link bzw. Text aus-/einblenden
95:
svgdoc.getElementById("aktion").style.setProperty("visibility","hidden","");
96:
svgdoc.getElementById("info").style.setProperty("visibility","visible","");
97:
}
98: 99:
]]>
100:
</script>
101: 102:
</defs>
103: 104:
<text x="20" y="30" style="fill: #000; font-size: 24px">
105:
parseXML()</text>
106:
<text x="20" y="50" style="fill: #000; font-size: 14px">
107:
mit GZip-komprimierten Daten (svgz)</text>
108: 109:
<!-- Achsen -->
110:
<line x1="50" y1="200" x2="547" y2="200"/>
111:
<line x1="300" y1="50" x2="300" y2="350"/>
112:
<line x1="540" y1="195" x2="550" y2="200"/>
113:
<line x1="540" y1="205" x2="550" y2="200"/>
114:
<line x1="295" y1="60" x2="300" y2="50"/>
115:
<line x1="300" y1="50" x2="305" y2="60"/>
116: 117:
<!-- Achsenteilung x -->
118:
<g>
119:
<line x1="100" y1="200" x2="100" y2="205"/>
120:
<line x1="150" y1="200" x2="150" y2="205"/>
121:
<line x1="200" y1="200" x2="200" y2="205"/>
122:
<line x1="250" y1="200" x2="250" y2="205"/>
123:
<line x1="350" y1="200" x2="350" y2="205"/>
124:
<line x1="400" y1="200" x2="400" y2="205"/>
125:
<line x1="450" y1="200" x2="450" y2="205"/>
126:
<line x1="500" y1="200" x2="500" y2="205"/>
127: 128:
<text x="93" y="215">-20</text>
129:
<text x="143" y="215">-15</text>
130:
<text x="193" y="215">-10</text>
131:
<text x="243" y="215">-5</text>
132:
<text x="347" y="215">5</text>
133:
<text x="395" y="215">10</text>
134:
<text x="445" y="215">15</text>
135:
<text x="495" y="215">20</text>
136:
<text x="555" y="203" style="font-size: 12px">x</text>
137:
</g>
138: 139:
<!-- Achsenteilung y -->
140:
<g>
141:
<line x1="295" y1="100" x2="300" y2="100"/>
142:
<line x1="295" y1="150" x2="300" y2="150"/>
143:
<line x1="295" y1="250" x2="300" y2="250"/>
144:
<line x1="295" y1="300" x2="300" y2="300"/>
145: 146:
<text x="297" y="40" style="font-size: 12px">y</text>
147:
<text x="287" y="103">2</text>
148:
<text x="287" y="153">1</text>
149:
<text x="284" y="253">-1</text>
150:
<text x="284" y="303">-2</text>
151:
</g>
152: 153:
<g id="aktion">
154:
<a xlink:href="" cursor="pointer" onclick="return false">
155:
<text x="185" y="380" style="fill: #00C; font-size: 14px"
156:
onclick="XMLDaten()">XML-Daten laden / Funktion 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:
<g id="info" style="visibility: hidden">
164:
<text x="210" y="380" style="fill: #00C; font-size: 14px">
165:
Funktion: y = sin(2 x) + 2 sin(x)
166:
</text>
167:
</g>
168: 169:
<text x="100" y="390" style="fill: #F00; font-size: 12px">
170:
<tspan x="100" dy="16">Es werden 200 KB komprimierte XML-Daten geladen
171:
(unkomprimiert 1.2 MB).</tspan>
172:
<tspan x="100" dy="16">Von den 44000 x,y-Datensätzen werden 4400 Paare
173:
mittels polyline-Element</tspan>
174:
<tspan x="100" dy="16">grafisch dargestellt.</tspan>
175:
</text>
176: 177:
</svg>
[zum Anfang]
