SVG – Learning by Coding

[ barchart_3deffekt.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 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-familysans-serif;
 24:         font-size12px;
 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 100Hoehe als Ausgangspunkt,
214:        Reihenfolgevornobenrechts
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]