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]
