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]
