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: 12:
<title>SVG - Learning by Coding</title>
13:
<desc>SVG-Spezifikation in Beispielen</desc>
14: 15:
<defs>
16: 17:
<style type="text/css">
18:
<![CDATA[
19: 20:
rect.haupt
21:
{
22:
fill: #FFC;
23:
stroke: #000;
24:
stroke-width: 2px;
25:
}
26: 27:
rect.unter
28:
{
29:
fill: #EEF;
30:
stroke: #000;
31:
stroke-width: 1px;
32:
}
33: 34:
text.haupt
35:
{
36:
fill: #00C;
37:
font-size: 12px;
38:
text-anchor: middle;
39:
pointer-events: none;
40:
}
41: 42:
text.unter
43:
{
44:
fill: #000;
45:
font-size: 11px;
46:
text-anchor: middle;
47:
pointer-events: none;
48:
}
49: 50:
a text.unter
51:
{
52:
fill: #F00;
53:
pointer-events: inherit;
54:
}
55: 56:
]]>
57:
</style>
58: 59: 60:
<script type="text/javascript">
61:
<![CDATA[
62: 63:
function MenueAktion(men)
64:
{
65:
alert("Menüpunkt "+men+" wurde geklickt.");
66:
}
67: 68:
]]>
69:
</script>
70: 71:
</defs>
72: 73:
<text x="20" y="30" style="fill: #000; font-size: 24px">
74:
Pull-Down-Menü (statischer SVG-Code)</text>
75: 76:
<text x="20" y="220" style="fill: #F00">
77:
Hinweis: Die roten Menüpunkte sind verlinkt!</text>
78: 79:
<!-- Menue 1 -->
80:
<g id="men1">
81:
<!-- Hauptmenue 1 -->
82:
<rect x="20" y="60" width="100" height="20" class="haupt">
83:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/>
84:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen1.mouseover"/>
85:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/>
86:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen1.mouseout"/>
87:
</rect>
88:
<text x="70" y="75" class="haupt">Hauptmenü 1</text>
89: 90:
<!-- Untermenues 1 -->
91:
<g id="umen1" style="display: none">
92:
<set attributeName="display" attributeType="CSS" to="block" begin="men1.mouseover"/>
93:
<set attributeName="display" attributeType="CSS" to="none" begin="men1.mouseout"/>
94: 95:
<rect x="20" y="80" width="100" height="20" class="unter" onclick="MenueAktion('1.1')">
96:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
97:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
98:
</rect>
99:
<text x="70" y="95" class="unter">Untermenü 1.1</text>
100: 101:
<rect x="20" y="100" width="100" height="20" class="unter" onclick="MenueAktion('1.2')">
102:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
103:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
104:
</rect>
105:
<text x="70" y="115" class="unter">Untermenü 1.2</text>
106: 107:
<rect x="20" y="120" width="100" height="20" class="unter" onclick="MenueAktion('1.3')">
108:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
109:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
110:
</rect>
111:
<text x="70" y="135" class="unter">Untermenü 1.3</text>
112: 113:
<rect x="20" y="140" width="100" height="20" class="unter"><!-- onclick="MenueAktion('1.4')" -->
114:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
115:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
116:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="link14.mouseover"/>
117:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="link14.mouseout"/>
118:
</rect>
119:
<a id="link14" xlink:href="http://www.styleassistant.de" target="_top">
120:
<text x="70" y="155" class="unter">Untermenü 1.4</text>
121:
</a>
122: 123:
<rect x="20" y="160" width="100" height="20" class="unter" onclick="MenueAktion('1.5')">
124:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
125:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
126:
</rect>
127:
<text x="70" y="175" class="unter">Untermenü 1.5</text>
128:
</g>
129:
</g>
130: 131: 132:
<!-- Menue 2 -->
133:
<g id="men2">
134:
<!-- Hauptmenue 2 -->
135:
<rect x="120" y="60" width="100" height="20" class="haupt">
136:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/>
137:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen2.mouseover"/>
138:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/>
139:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen2.mouseout"/>
140:
</rect>
141:
<text x="170" y="75" class="haupt">Hauptmenü 2</text>
142: 143:
<!-- Untermenues 2 -->
144:
<g id="umen2" style="display: none">
145:
<set attributeName="display" attributeType="CSS" to="block" begin="men2.mouseover"/>
146:
<set attributeName="display" attributeType="CSS" to="none" begin="men2.mouseout"/>
147: 148:
<rect x="120" y="80" width="100" height="20" class="unter"><!-- onclick="MenueAktion('2.1')" -->
149:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
150:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
151:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="link21.mouseover"/>
152:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="link21.mouseout"/>
153:
</rect>
154:
<a id="link21" xlink:href="http://www.datenverdrahten.de" target="_top">
155:
<text x="170" y="95" class="unter">Untermenü 2.1</text>
156:
</a>
157: 158:
<rect x="120" y="100" width="100" height="20" class="unter" onclick="MenueAktion('2.2')">
159:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
160:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
161:
</rect>
162:
<text x="170" y="115" class="unter">Untermenü 2.2</text>
163: 164:
<rect x="120" y="120" width="100" height="20" class="unter" onclick="MenueAktion('2.3')">
165:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
166:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
167:
</rect>
168:
<text x="170" y="135" class="unter">Untermenü 2.3</text>
169:
</g>
170:
</g>
171: 172: 173:
<!-- Menue 3 -->
174:
<g id="men3">
175:
<!-- Hauptmenue 3 -->
176:
<rect x="220" y="60" width="100" height="20" class="haupt">
177:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/>
178:
<set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen3.mouseover"/>
179:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/>
180:
<set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen3.mouseout"/>
181:
</rect>
182:
<text x="270" y="75" class="haupt">Hauptmenü 3</text>
183: 184:
<!-- Untermenues 3 -->
185:
<g id="umen3" style="display: none">
186:
<set attributeName="display" attributeType="CSS" to="block" begin="men3.mouseover"/>
187:
<set attributeName="display" attributeType="CSS" to="none" begin="men3.mouseout"/>
188: 189:
<rect x="220" y="80" width="100" height="20" class="unter" onclick="MenueAktion('3.1')">
190:
<set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/>
191:
<set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/>
192:
</rect>
193:
<text x="270" y="95" class="unter">Untermenü 3.1</text>
194:
</g>
195:
</g>
196: 197:
</svg>
[zum Anfang]
