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 12/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-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,svgroot,balken,svgns;
35:
36:
37: function Init(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: svgroot=svgdoc.rootElement;
41: balken=svgdoc.getElementById("balken");
42: svgns="http://www.w3.org/2000/svg";
43: }
44:
45:
46: function Set3DBars(dat,col,txt)
47: {
48: var pv,ov,po,oo,pr,or,gr,poly,pp,wp,i,j,balkanz;
49: var xstep=85,ystep=40,diff=20;
50:
51: po=[70,70,90,50,130,50,110,70]; oo="0.8"; // Polygon oben
52: pv=[70,470,70,70,110,70,110,470]; ov="0.6"; // Polygon vorn
53: pr=[110,70,130,50,130,450,110,470]; or="0.4"; // Polygon rechts
54:
55: // ggf. vorhandene Balken entfernen
56: if(balken.hasChildNodes())
57: {
58: balkanz=balken.childNodes.length;
59: for(i=0;i<balkanz;i++)balken.removeChild(balken.lastChild);
60: }
61:
62: // Balken nacheinander als Gruppe von jeweils drei Polygonen erzeugen
63: for(i=0;i<dat.length;i++)
64: {
65: gr=svgdoc.createElementNS(svgns,"g");
66: gr.setAttribute("fill",col[i]);
67:
68:
69: // Polygon vorn erzeugen
70: poly=svgdoc.createElementNS(svgns,"polygon");
71: pp="";
72: for(j=0;j<pv.length;j++)
73: {
74: if(j%2==0)pp+=pv[j]+i*xstep+",";
75: else if(j==3||j==5)pp+=pv[j]+((100-dat[i])/10-0.5)*ystep+diff+",";
76: else pp+=pv[j]+",";
77: }
78: pp=pp.substring(0,pp.length-1);
79: poly.setAttribute("points",pp);
80: poly.setAttribute("opacity",ov);
81: gr.appendChild(poly);
82: wp=""+pp;
83:
84:
85: // Polygon oben erzeugen
86: poly=svgdoc.createElementNS(svgns,"polygon");
87: pp="";
88: for(j=0;j<po.length;j++)
89: {
90: if(j%2==0)pp+=po[j]+i*xstep+",";
91: else pp+=po[j]+((100-dat[i])/10-0.5)*ystep+diff+",";
92: }
93: pp=pp.substring(0,pp.length-1);
94: poly.setAttribute("points",pp);
95: poly.setAttribute("opacity",oo);
96: gr.appendChild(poly);
97: wp+=" "+pp;
98:
99:
100: // Polygon rechts erzeugen
101: poly=svgdoc.createElementNS(svgns,"polygon");
102: pp="";
103: for(j=0;j<pr.length;j++)
104: {
105: if(j%2==0)pp+=pr[j]+i*xstep+",";
106: else if(j==1||j==3)pp+=pr[j]+((100-dat[i])/10-0.5)*ystep+diff+",";
107: else pp+=pr[j]+",";
108: }
109: pp=pp.substring(0,pp.length-1);
110: poly.setAttribute("points",pp);
111: poly.setAttribute("opacity",or);
112: gr.appendChild(poly);
113: wp+=" "+pp;
114:
115:
116: // Polygon hinten erzeugen (zur Abdeckung der Linien)
117: poly=svgdoc.createElementNS(svgns,"polygon");
118: poly.setAttribute("points",wp);
119: poly.setAttribute("fill","#FFF");
120: gr.insertBefore(poly,gr.firstChild);
121:
122:
123: // gesamte Balkengruppe einhaengen
124: balken.appendChild(gr);
125: }
126:
127:
128: // untere Achse beschriften
129: svgdoc.getElementById("t1").firstChild.nodeValue=txt[0];
130: svgdoc.getElementById("t2").firstChild.nodeValue=txt[1];
131: svgdoc.getElementById("t3").firstChild.nodeValue=txt[2];
132: svgdoc.getElementById("t4").firstChild.nodeValue=txt[3];
133: svgdoc.getElementById("t5").firstChild.nodeValue=txt[4];
134: }
135:
136: ]]>
137: </script>
138:
139: </defs>
140:
141: <text x="30" y="30" style="fill: #000; font-size: 24px">
142: Balkendiagramm mit 3D-Effekt erzeugen</text>
143:
144: <a xlink:href="" cursor="pointer" onclick="return false"><text x="100" y="520" fill="#F00" onclick="
145: Set3DBars([20,40,60,80,100],['#FF0','#F00','#090','#00F','#000'],
146: ['Text 1','Text 2','Text 3','Text 4','Text 5'])">
147: Balkenset 1 darstellen</text>
148: </a>
149:
150: <a xlink:href="" cursor="pointer" onclick="return false"><text x="280" y="520" fill="#F00" onclick="
151: Set3DBars([49,18,96,71,25],['#FC0','#F69','#9C6','#39F','#96C'],
152: ['Text 1','Text 2','Text 3','Text 4','Text 5'])">
153: Balkenset 2 darstellen</text>
154: </a>
155:
156: <!-- Diagrammflaechen -->
157: <!-- hinten -->
158: <polygon points="50,470 70,450 470,450 470,50 70,50 50,70" fill="#FFF"/>
159: <!-- unten -->
160: <polygon points="50,470 70,450 470,450 450,470" fill="#EEE"/>
161:
162: <g fill="none" stroke="#CCC" stroke-width="1.5px">
163: <!-- Achsen und Teilungen -->
164: <polyline points=" 50, 70 50,470"/><!-- Achse links -->
165: <polyline points=" 50,470 450,470"/><!-- Achse unten -->
166: <polyline points=" 70, 50 70,450"/><!-- Achse hinten -->
167: <polyline points="470, 50 470,450 450,470"/><!-- Achse rechts -->
168:
169: <!-- Achsenteilung links mit Zwischenteilungen auf dem Hintergrund -->
170: <polyline points="45,70 50,70 70,50 470,50"/><!-- Dachlinie und Kopien -->
171: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0, 40)"/>
172: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0, 80)"/>
173: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,120)"/>
174: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,160)"/>
175: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,200)"/>
176: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,240)"/>
177: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,280)"/>
178: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,320)"/>
179: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,360)"/>
180: <polyline points="45,70 50,70 70,50 470,50" transform="translate(0,400)"/>
181:
182: <!-- Achsenteilung unten -->
183: <polyline points=" 90,470 90,475"/>
184: <polyline points="175,470 175,475"/>
185: <polyline points="260,470 260,475"/>
186: <polyline points="345,470 345,475"/>
187: <polyline points="430,470 430,475"/>
188: </g>
189:
190: <g fill="#000">
191: <!-- Achsen-Texte links -->
192: <text x="25" y="75" transform="translate(20,-20)"> %</text>
193: <text x="25" y="75" transform="translate(-5, 0)">100</text>
194: <text x="25" y="75" transform="translate( 0, 40)"> 90</text>
195: <text x="25" y="75" transform="translate( 0, 80)"> 80</text>
196: <text x="25" y="75" transform="translate( 0,120)"> 70</text>
197: <text x="25" y="75" transform="translate( 0,160)"> 60</text>
198: <text x="25" y="75" transform="translate( 0,200)"> 50</text>
199: <text x="25" y="75" transform="translate( 0,240)"> 40</text>
200: <text x="25" y="75" transform="translate( 0,280)"> 30</text>
201: <text x="25" y="75" transform="translate( 0,320)"> 20</text>
202: <text x="25" y="75" transform="translate( 0,360)"> 10</text>
203: <text x="25" y="75" transform="translate( 7,400)"> 0</text>
204:
205: <!-- Achsen-Texte unten -->
206: <text id="t1" x="75" y="490"> </text>
207: <text id="t2" x="160" y="490"> </text>
208: <text id="t3" x="245" y="490"> </text>
209: <text id="t4" x="330" y="490"> </text>
210: <text id="t5" x="415" y="490"> </text>
211: </g>
212:
213: <!-- statischer 3D-Balken mit 100% Hoehe als Ausgangspunkt,
214: Reihenfolge: vorn, oben, rechts
215: <g fill="#...">
216: <polygon points="70,470 70,70 110, 70 110,470" opacity="0.6"/>
217: <polygon points=" 70,70 90,50 130, 50 110, 70" opacity="0.8"/>
218: <polygon points="110,70 130,50 130,450 110,470" opacity="0.4"/>
219: </g>
220: -->
221:
222: <!-- Gruppe fuer dynamisch erzeugte Balken -->
223: <g id="balken"></g>
224:
225: </svg>
[zum Anfang]
