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 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-width: 2px;
26: }
27:
28: rect.unter
29: {
30: fill: #EEF;
31: stroke: #000;
32: stroke-width: 1px;
33: }
34:
35: text.haupt
36: {
37: fill: #00C;
38: font-size: 12px;
39: text-anchor: middle;
40: pointer-events: none;
41: }
42:
43: text.unter
44: {
45: fill: #000;
46: font-size: 11px;
47: text-anchor: middle;
48: pointer-events: none;
49: }
50:
51: a text.unter
52: {
53: fill: #F00;
54: pointer-events: inherit;
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]
