SVG – Learning by Coding

[ pulldownmenue_d.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 03/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);createMenues()">
 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:       rect.haupt
 22:       {
 23:         fill#FFC;
 24:         stroke#000;
 25:         stroke-width2px;
 26:       }
 27: 
 28:       rect.unter
 29:       {
 30:         fill#EEF;
 31:         stroke#000;
 32:         stroke-width1px;
 33:       }
 34: 
 35:       text.haupt
 36:       {
 37:         fill#00C;
 38:         font-size12px;
 39:         text-anchormiddle;
 40:         pointer-eventsnone;
 41:       }
 42: 
 43:       text.unter
 44:       {
 45:         fill#000;
 46:         font-size11px;
 47:         text-anchormiddle;
 48:         pointer-eventsnone;
 49:       }
 50: 
 51:       a text.unter
 52:       {
 53:         fill#F00;
 54:         pointer-eventsinherit;
 55:       }
 56: 
 57:       ]]>
 58:     </style>
 59: 
 60: 
 61:     <script type="text/javascript">
 62:       <![CDATA[
 63: 
 64:       var svgdoc,svgroot;
 65: 
 66: 			
 67:       function getSVGDoc(load_evt)
 68:       {
 69:         svgdoc=load_evt.target.ownerDocument;
 70:         svgroot=svgdoc.documentElement;
 71:       }
 72: 
 73: 
 74:       function createMenues()
 75:       {
 76:         var menues,hlinks,target,menue_x,menue_y,menue_b,menue_h,haupt_out,haupt_over,unter_out,unter_over,dx,dy;
 77:         var haupt_g,haupt_r,haupt_t,haupt_txt,haupt_s1,haupt_s2,haupt_s3,haupt_s4;
 78:         var unter_g,unter_r,unter_t,unter_txt,unter_s1,unter_s2,unter_s3,unter_s4,unter_s5,unter_s6,unter_a;
 79:         var svgns="http://www.w3.org/2000/svg";
 80: 
 81: 
 82:         // Arrays fuer die Menuepunkte und die Links
 83:         menues=new Array();
 84:         hlinks=new Array();
 85: 
 86:         // Vorgaben fuer Positionen und Farben - Anfang
 87:           menue_x=20;        // Menue x (erstes Rechteck)
 88:           menue_y=60;        // Menue y (erstes Rechteck)
 89:           menue_b=100;       // Breite der Rechtecke fuer Haupt- und Untermenues
 90:           menue_h=20;        // Hoehe der Rechtecke fuer Haupt- und Untermenues
 91:           haupt_out="#FFC";  // Mouseout-Farbe der Hauptmenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.haupt)
 92:           haupt_over="#FF0"// Mouseover-Farbe der Hauptmenuepunkte
 93:           unter_out="#EEF";  // Mouseout-Farbe der Untermenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.unter)
 94:           unter_over="#CFC"// Mouseover-Farbe der Untermenuepunkte
 95:           dx=50;             // x-Versatz der Menuetexte
 96:           dy=15;             // y-Versatz der Menuetexte
 97:           target="_top";     // Linkziel
 98:         // Vorgaben fuer Positionen und Farben - Ende
 99: 
100: 
101:         // Menuetexte der n Menues und URLs der n Links festlegen - Anfang
102:         // Schema:
103:         // menues[0 bis n-1]=new Array("Hauptmenuetext","Untermenuetext_1",...,"Untermenuetext_n");
104:         // Hier: 3 Hauptmenuepunkte mit 5/3/1 Untermenuepunkten
105:         // hlinks[0 bis n-1]=new Array("url_1",...,"url_n");
106:         // wenn kein Link erscheinen soll, einen Leerstring "" angeben
107:         // Hier: im 1. Untermenue ist Menuepunkt 4, im 2. Untermenue Menuepunkt 1 verlinkt
108: 
109:            menues[0]=new Array("Hauptmenü 1","Untermenü 1.1","Untermenü 1.2","Untermenü 1.3","Untermenü 1.4","Untermenü 1.5");
110:            hlinks[0]=new Array("","","","http://www.styleassistant.de","");
111:            menues[1]=new Array("Hauptmenü 2","Untermenü 2.1","Untermenü 2.2","Untermenü 2.3");
112:            hlinks[1]=new Array("http://www.datenverdrahten.de","","");
113:            menues[2]=new Array("Hauptmenü 3","Untermenü 3.1");
114:            hlinks[2]=new Array("");
115: 
116:         // Menuetexte der n Menues und URLs der n Links festlegen - Ende
117: 
118: 
119:         // Menuestruktur dynamisch aufbauen - Anfang
120:         for(i=0;i<menues.length;i++)
121:         {
122:           // Hauptmenues mit Eintraegen erzeugen - Anfang
123:           haupt_g=svgdoc.createElementNS(svgns,"g");
124:           haupt_g.setAttribute("id","men"+parseInt(i+1));
125: 
126:           haupt_r=svgdoc.createElementNS(svgns,"rect");
127:           haupt_r.setAttribute("x",menue_x+i*menue_b);
128:           haupt_r.setAttribute("y",menue_y);
129:           haupt_r.setAttribute("width",menue_b);
130:           haupt_r.setAttribute("height",menue_h);
131:           haupt_r.setAttribute("class","haupt");
132: 
133:           haupt_s1=svgdoc.createElementNS(svgns,"set");
134:           haupt_s1.setAttribute("attributeName","fill");
135:           haupt_s1.setAttribute("attributeType","CSS");
136:           haupt_s1.setAttribute("to",haupt_over);
137:           haupt_s1.setAttribute("begin","mouseover");
138: 
139:           haupt_s2=svgdoc.createElementNS(svgns,"set");
140:           haupt_s2.setAttribute("attributeName","fill");
141:           haupt_s2.setAttribute("attributeType","CSS");
142:           haupt_s2.setAttribute("to",haupt_over);
143:           haupt_s2.setAttribute("begin","umen"+parseInt(i+1)+".mouseover");
144: 
145:           haupt_s3=svgdoc.createElementNS(svgns,"set");
146:           haupt_s3.setAttribute("attributeName","fill");
147:           haupt_s3.setAttribute("attributeType","CSS");
148:           haupt_s3.setAttribute("to",haupt_out);
149:           haupt_s3.setAttribute("begin","mouseout");
150: 
151:           haupt_s4=svgdoc.createElementNS(svgns,"set");
152:           haupt_s4.setAttribute("attributeName","fill");
153:           haupt_s4.setAttribute("attributeType","CSS");
154:           haupt_s4.setAttribute("to",haupt_out);
155:           haupt_s4.setAttribute("begin","umen"+parseInt(i+1)+".mouseout");
156: 
157:           haupt_t=svgdoc.createElementNS(svgns,"text");
158:           haupt_t.setAttribute("x",menue_x+i*menue_b+dx);
159:           haupt_t.setAttribute("y",menue_y+dy);
160:           haupt_t.setAttribute("class","haupt");
161:           haupt_txt=svgdoc.createTextNode(menues[i][0]);
162: 
163:           haupt_r.appendChild(haupt_s1);
164:           haupt_r.appendChild(haupt_s2);
165:           haupt_r.appendChild(haupt_s3);
166:           haupt_r.appendChild(haupt_s4);
167:           haupt_t.appendChild(haupt_txt);
168:           haupt_g.appendChild(haupt_r);
169:           haupt_g.appendChild(haupt_t);
170:           // Hauptmenues mit Eintraegen erzeugen - Ende
171: 
172: 
173:           // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Anfang
174:           unter_g=svgdoc.createElementNS(svgns,"g");
175:           unter_g.setAttribute("id","umen"+parseInt(i+1));
176:           unter_g.setAttribute("style","display: none");
177: 
178:           unter_s1=svgdoc.createElementNS(svgns,"set");
179:           unter_s1.setAttribute("attributeName","display");
180:           unter_s1.setAttribute("attributeType","CSS");
181:           unter_s1.setAttribute("to","block");
182:           unter_s1.setAttribute("begin","men"+parseInt(i+1)+".mouseover");
183: 
184:           unter_s2=svgdoc.createElementNS(svgns,"set");
185:           unter_s2.setAttribute("attributeName","display");
186:           unter_s2.setAttribute("attributeType","CSS");
187:           unter_s2.setAttribute("to","none");
188:           unter_s2.setAttribute("begin","men"+parseInt(i+1)+".mouseout");
189:           // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Ende
190: 
191: 
192:           // Untermenuepunkte fuer das i-te Hauptmenue - Anfang
193:           for(j=1;j<menues[i].length;j++)
194:           {
195:             unter_r=svgdoc.createElementNS(svgns,"rect");
196:             unter_r.setAttribute("x",menue_x+i*menue_b);
197:             unter_r.setAttribute("y",menue_y+j*menue_h);
198:             unter_r.setAttribute("width",menue_b);
199:             unter_r.setAttribute("height",menue_h);
200:             unter_r.setAttribute("class","unter");
201:             if(hlinks[i][j-1]=="")unter_r.setAttribute("onclick","MenueAktion('"+parseInt(i+1)+"."+j+"')");
202: 
203:             unter_s3=svgdoc.createElementNS(svgns,"set");
204:             unter_s3.setAttribute("attributeName","fill");
205:             unter_s3.setAttribute("attributeType","CSS");
206:             unter_s3.setAttribute("to",unter_over);
207:             unter_s3.setAttribute("begin","mouseover");
208: 
209:             unter_s4=svgdoc.createElementNS(svgns,"set");
210:             unter_s4.setAttribute("attributeName","fill");
211:             unter_s4.setAttribute("attributeType","CSS");
212:             unter_s4.setAttribute("to",unter_out);
213:             unter_s4.setAttribute("begin","mouseout");
214: 
215:             unter_s5=svgdoc.createElementNS(svgns,"set");
216:             unter_s5.setAttribute("attributeName","fill");
217:             unter_s5.setAttribute("attributeType","CSS");
218:             unter_s5.setAttribute("to",unter_over);
219:             unter_s5.setAttribute("begin","link"+i.toString()+j.toString()+".mouseover");
220: 
221:             unter_s6=svgdoc.createElementNS(svgns,"set");
222:             unter_s6.setAttribute("attributeName","fill");
223:             unter_s6.setAttribute("attributeType","CSS");
224:             unter_s6.setAttribute("to",unter_out);
225:             unter_s6.setAttribute("begin","link"+i.toString()+j.toString()+".mouseout");
226:           
227:             unter_t=svgdoc.createElementNS(svgns,"text");
228:             unter_t.setAttribute("x",menue_x+i*menue_b+dx);
229:             unter_t.setAttribute("y",menue_y+j*menue_h+dy);
230:             unter_t.setAttribute("class","unter");
231:             unter_txt=svgdoc.createTextNode(menues[i][j]);
232: 
233:             unter_a=svgdoc.createElementNS(svgns,"a");
234:             unter_a.setAttributeNS("http://www.w3.org/1999/xlink","href",hlinks[i][j-1]);
235:             unter_a.setAttribute("target",target);
236:             unter_a.setAttribute("id","link"+i.toString()+j.toString());
237: 
238:             unter_a.appendChild(unter_t);
239: 
240:             unter_r.appendChild(unter_s3);
241:             unter_r.appendChild(unter_s4);
242:             unter_r.appendChild(unter_s5);
243:             unter_r.appendChild(unter_s6);
244:             unter_t.appendChild(unter_txt);
245:             
246:             unter_g.appendChild(unter_s1);
247:             unter_g.appendChild(unter_s2);
248:             unter_g.appendChild(unter_r);
249:             if(hlinks[i][j-1])unter_g.appendChild(unter_a);
250:             else unter_g.appendChild(unter_t);
251:             haupt_g.appendChild(unter_g);
252: 
253:           }
254:           // Untermenuepunkte fuer das i-te Hauptmenue - Ende
255: 
256:           // Hauptmenue mit Untermenues in den DOM-Baum einhaengen
257:           svgroot.appendChild(haupt_g);
258:         }
259:         // Menuestruktur dynamisch aufbauen - Ende
260:       }
261: 
262: 
263:       function MenueAktion(men)
264:       {
265:         alert("Menüpunkt "+men+" wurde geklickt.");
266:       }
267: 
268:       ]]>
269:     </script>
270: 
271:   </defs>
272: 
273:   <text x="20" y="30" style="fill: #000; font-size: 24px">
274:     Pull-Down-Menü (dynamisch generierter SVG-Code)</text>
275: 
276:   <text x="20" y="220" style="fill: #F00">
277:     Hinweis: Die roten Menüpunkte sind verlinkt!</text>
278: 
279: </svg>

[zum Anfang]