SVG – Learning by Coding

[ pulldownmenue_s.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: 
 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-width2px;
 25:       }
 26: 
 27:       rect.unter
 28:       {
 29:         fill#EEF;
 30:         stroke#000;
 31:         stroke-width1px;
 32:       }
 33: 
 34:       text.haupt
 35:       {
 36:         fill#00C;
 37:         font-size12px;
 38:         text-anchormiddle;
 39:         pointer-eventsnone;
 40:       }
 41: 
 42:       text.unter
 43:       {
 44:         fill#000;
 45:         font-size11px;
 46:         text-anchormiddle;
 47:         pointer-eventsnone;
 48:       }
 49: 
 50:       a text.unter
 51:       {
 52:         fill#F00;
 53:         pointer-eventsinherit;
 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]