SVG – Learning by Coding

[ knoten_loeschen.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 02/05 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 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:       *
 22:       {
 23:         font-familysans-serif;
 24:         font-size12px;
 25:       }
 26: 
 27:       rect
 28:       {
 29:         strokewhite;
 30:       }
 31: 
 32:       ]]>
 33:     </style>
 34: 
 35: 
 36:     <script type="text/javascript">
 37:       <![CDATA[
 38: 
 39:       var svgdoc,svgroot,t1=true,t2=true;
 40: 
 41: 
 42:       function Init(load_evt)
 43:       {
 44:         svgdoc=load_evt.target.ownerDocument;
 45:         svgroot=svgdoc.rootElement;  
 46:       }
 47: 
 48: 
 49:       function Test1()
 50:       {
 51:         if(t1)
 52:         {
 53:           var obj,clone,start,ende,diff;
 54:           obj=svgdoc.getElementById("gruppe1");
 55: 
 56:           start=svgroot.getCurrentTime(); // Zeitmessung starten
 57: 
 58:           // Gruppe ohne Kindknoten klonen und den Elementknoten
 59:           // selbst durch das geklonte Objekt ersetzen
 60:           clone=obj.cloneNode(false);
 61:           obj.parentNode.replaceChild(clone,obj);
 62: 
 63:           ende=svgroot.getCurrentTime(); // Zeitmessung stoppen
 64: 
 65:           diff=Math.round((ende-start)*1000); // Zeitdifferenz ausgeben
 66:           svgdoc.getElementById("test1").firstChild.nodeValue=" ("+diff+" ms)";
 67: 
 68:           t1=false;
 69:         }
 70:       }
 71: 
 72: 
 73:       function Test2()
 74:       {
 75:         if(t2)
 76:         {
 77:           var obj,anz,start,ende,diff;
 78:           obj=svgdoc.getElementById("gruppe2");
 79: 
 80:           start=svgroot.getCurrentTime(); // Zeitmessung starten
 81: 
 82:           // alle Kindknoten der Gruppe in einer Schleife entfernen
 83:           anz=obj.childNodes.length;
 84:           for(i=0;i<anz;i++)obj.removeChild(obj.lastChild);  
 85: 
 86:           ende=svgroot.getCurrentTime(); // Zeitmessung stoppen
 87: 
 88:           diff=Math.round((ende-start)*1000); // Zeitdifferenz ausgeben
 89:           svgdoc.getElementById("test2").firstChild.nodeValue=" ("+diff+" ms)";
 90: 
 91:           t2=false;
 92:         }
 93:       }
 94: 
 95:       ]]>
 96:     </script>
 97: 
 98:   </defs>
 99: 
100:   <text x="20" y="30" style="fill: #000; font-size: 24px">
101:     Knoten aus dem DOM-Baum löschen (Technik-Vergleich)</text>
102:   <text x="20" y="45">
103:     einfacher Performance-Test mit jeweils 150 rect-Elementen</text>
104: 
105:   <text x="20" y="70" style="font-size: 11px; fill: #00C">
106:     <tspan x="20" dy="1.2em" style="fill: #000">Technik 1:</tspan>
107:     <tspan x="20" dy="1.2em">clone=obj.cloneNode(false);</tspan>
108:     <tspan x="20" dy="1.2em">obj.parentNode.replaceChild(clone,obj);</tspan>
109:   </text>
110: 
111:   <text x="20" y="140" style="font-size: 11px; fill: #00C">
112:     <tspan x="20" dy="1.2em" style="fill: #000">Technik 2:</tspan>
113:     <tspan x="20" dy="1.2em">anz=obj.childNodes.length;</tspan>
114:     <tspan x="20" dy="1.2em">
115:       for(i=0;i&lt;anz;i++)obj.removeChild(obj.lastChild);</tspan>
116:   </text>
117: 
118:   <a xlink:href="" cursor="pointer" onclick="return false">
119:     <text x="290" y="95" onclick="Test1()">Test 1
120:       <set attributeName="fill" attributeType="CSS"
121:         to="#F00" begin="mouseover" end="mouseout"/>
122:       <tspan id="test1" fill="#00C"> </tspan>
123:     </text>
124:   </a>
125: 
126:   <a xlink:href="" cursor="pointer" onclick="return false">
127:     <text x="290" y="165" onclick="Test2()">Test 2
128:       <set attributeName="fill" attributeType="CSS"
129:         to="#F00" begin="mouseover" end="mouseout"/>
130:       <tspan id="test2" fill="#00C"> </tspan>
131:     </text>
132:   </a>
133: 
134:   <text x="20" y="220">
135:     FazitZum Entfernen (sehrgroßer Knotenmengen bietet sich Technik 1 an.</text>
136: 
137:   <!-- 1. Gruppe mit 150 rect-Elementen -->
138:   <g id="gruppe1">
139:     <rect x="20" y="60" width="10" height="10" fill="#FF0"/>
140:     <rect x="30" y="60" width="10" height="10" fill="#FF0"/>
141:     <rect x="40" y="60" width="10" height="10" fill="#FF0"/>
142:     <rect x="50" y="60" width="10" height="10" fill="#FF0"/>
143:     <rect x="60" y="60" width="10" height="10" fill="#FF0"/>
144:     <rect x="70" y="60" width="10" height="10" fill="#FF0"/>
145:     <rect x="80" y="60" width="10" height="10" fill="#FF0"/>
146:     <rect x="90" y="60" width="10" height="10" fill="#FF0"/>
147:     <rect x="100" y="60" width="10" height="10" fill="#FF0"/>
148:     <rect x="110" y="60" width="10" height="10" fill="#FF0"/>
149:     <rect x="120" y="60" width="10" height="10" fill="#FF0"/>
150:     <rect x="130" y="60" width="10" height="10" fill="#FF0"/>
151:     <rect x="140" y="60" width="10" height="10" fill="#FF0"/>
152:     <rect x="150" y="60" width="10" height="10" fill="#FF0"/>
153:     <rect x="160" y="60" width="10" height="10" fill="#FF0"/>
154:     <rect x="170" y="60" width="10" height="10" fill="#FF0"/>
155:     <rect x="180" y="60" width="10" height="10" fill="#FF0"/>
156:     <rect x="190" y="60" width="10" height="10" fill="#FF0"/>
157:     <rect x="200" y="60" width="10" height="10" fill="#FF0"/>
158:     <rect x="210" y="60" width="10" height="10" fill="#FF0"/>
159:     <rect x="220" y="60" width="10" height="10" fill="#FF0"/>
160:     <rect x="230" y="60" width="10" height="10" fill="#FF0"/>
161:     <rect x="240" y="60" width="10" height="10" fill="#FF0"/>
162:     <rect x="250" y="60" width="10" height="10" fill="#FF0"/>
163:     <rect x="260" y="60" width="10" height="10" fill="#FF0"/>
164:     <rect x="20" y="70" width="10" height="10" fill="#F00"/>
165:     <rect x="30" y="70" width="10" height="10" fill="#F00"/>
166:     <rect x="40" y="70" width="10" height="10" fill="#F00"/>
167:     <rect x="50" y="70" width="10" height="10" fill="#F00"/>
168:     <rect x="60" y="70" width="10" height="10" fill="#F00"/>
169:     <rect x="70" y="70" width="10" height="10" fill="#F00"/>
170:     <rect x="80" y="70" width="10" height="10" fill="#F00"/>
171:     <rect x="90" y="70" width="10" height="10" fill="#F00"/>
172:     <rect x="100" y="70" width="10" height="10" fill="#F00"/>
173:     <rect x="110" y="70" width="10" height="10" fill="#F00"/>
174:     <rect x="120" y="70" width="10" height="10" fill="#F00"/>
175:     <rect x="130" y="70" width="10" height="10" fill="#F00"/>
176:     <rect x="140" y="70" width="10" height="10" fill="#F00"/>
177:     <rect x="150" y="70" width="10" height="10" fill="#F00"/>
178:     <rect x="160" y="70" width="10" height="10" fill="#F00"/>
179:     <rect x="170" y="70" width="10" height="10" fill="#F00"/>
180:     <rect x="180" y="70" width="10" height="10" fill="#F00"/>
181:     <rect x="190" y="70" width="10" height="10" fill="#F00"/>
182:     <rect x="200" y="70" width="10" height="10" fill="#F00"/>
183:     <rect x="210" y="70" width="10" height="10" fill="#F00"/>
184:     <rect x="220" y="70" width="10" height="10" fill="#F00"/>
185:     <rect x="230" y="70" width="10" height="10" fill="#F00"/>
186:     <rect x="240" y="70" width="10" height="10" fill="#F00"/>
187:     <rect x="250" y="70" width="10" height="10" fill="#F00"/>
188:     <rect x="260" y="70" width="10" height="10" fill="#F00"/>
189:     <rect x="20" y="80" width="10" height="10" fill="#090"/>
190:     <rect x="30" y="80" width="10" height="10" fill="#090"/>
191:     <rect x="40" y="80" width="10" height="10" fill="#090"/>
192:     <rect x="50" y="80" width="10" height="10" fill="#090"/>
193:     <rect x="60" y="80" width="10" height="10" fill="#090"/>
194:     <rect x="70" y="80" width="10" height="10" fill="#090"/>
195:     <rect x="80" y="80" width="10" height="10" fill="#090"/>
196:     <rect x="90" y="80" width="10" height="10" fill="#090"/>
197:     <rect x="100" y="80" width="10" height="10" fill="#090"/>
198:     <rect x="110" y="80" width="10" height="10" fill="#090"/>
199:     <rect x="120" y="80" width="10" height="10" fill="#090"/>
200:     <rect x="130" y="80" width="10" height="10" fill="#090"/>
201:     <rect x="140" y="80" width="10" height="10" fill="#090"/>
202:     <rect x="150" y="80" width="10" height="10" fill="#090"/>
203:     <rect x="160" y="80" width="10" height="10" fill="#090"/>
204:     <rect x="170" y="80" width="10" height="10" fill="#090"/>
205:     <rect x="180" y="80" width="10" height="10" fill="#090"/>
206:     <rect x="190" y="80" width="10" height="10" fill="#090"/>
207:     <rect x="200" y="80" width="10" height="10" fill="#090"/>
208:     <rect x="210" y="80" width="10" height="10" fill="#090"/>
209:     <rect x="220" y="80" width="10" height="10" fill="#090"/>
210:     <rect x="230" y="80" width="10" height="10" fill="#090"/>
211:     <rect x="240" y="80" width="10" height="10" fill="#090"/>
212:     <rect x="250" y="80" width="10" height="10" fill="#090"/>
213:     <rect x="260" y="80" width="10" height="10" fill="#090"/>
214:     <rect x="20" y="90" width="10" height="10" fill="#00C"/>
215:     <rect x="30" y="90" width="10" height="10" fill="#00C"/>
216:     <rect x="40" y="90" width="10" height="10" fill="#00C"/>
217:     <rect x="50" y="90" width="10" height="10" fill="#00C"/>
218:     <rect x="60" y="90" width="10" height="10" fill="#00C"/>
219:     <rect x="70" y="90" width="10" height="10" fill="#00C"/>
220:     <rect x="80" y="90" width="10" height="10" fill="#00C"/>
221:     <rect x="90" y="90" width="10" height="10" fill="#00C"/>
222:     <rect x="100" y="90" width="10" height="10" fill="#00C"/>
223:     <rect x="110" y="90" width="10" height="10" fill="#00C"/>
224:     <rect x="120" y="90" width="10" height="10" fill="#00C"/>
225:     <rect x="130" y="90" width="10" height="10" fill="#00C"/>
226:     <rect x="140" y="90" width="10" height="10" fill="#00C"/>
227:     <rect x="150" y="90" width="10" height="10" fill="#00C"/>
228:     <rect x="160" y="90" width="10" height="10" fill="#00C"/>
229:     <rect x="170" y="90" width="10" height="10" fill="#00C"/>
230:     <rect x="180" y="90" width="10" height="10" fill="#00C"/>
231:     <rect x="190" y="90" width="10" height="10" fill="#00C"/>
232:     <rect x="200" y="90" width="10" height="10" fill="#00C"/>
233:     <rect x="210" y="90" width="10" height="10" fill="#00C"/>
234:     <rect x="220" y="90" width="10" height="10" fill="#00C"/>
235:     <rect x="230" y="90" width="10" height="10" fill="#00C"/>
236:     <rect x="240" y="90" width="10" height="10" fill="#00C"/>
237:     <rect x="250" y="90" width="10" height="10" fill="#00C"/>
238:     <rect x="260" y="90" width="10" height="10" fill="#00C"/>
239:     <rect x="20" y="100" width="10" height="10" fill="#999"/>
240:     <rect x="30" y="100" width="10" height="10" fill="#999"/>
241:     <rect x="40" y="100" width="10" height="10" fill="#999"/>
242:     <rect x="50" y="100" width="10" height="10" fill="#999"/>
243:     <rect x="60" y="100" width="10" height="10" fill="#999"/>
244:     <rect x="70" y="100" width="10" height="10" fill="#999"/>
245:     <rect x="80" y="100" width="10" height="10" fill="#999"/>
246:     <rect x="90" y="100" width="10" height="10" fill="#999"/>
247:     <rect x="100" y="100" width="10" height="10" fill="#999"/>
248:     <rect x="110" y="100" width="10" height="10" fill="#999"/>
249:     <rect x="120" y="100" width="10" height="10" fill="#999"/>
250:     <rect x="130" y="100" width="10" height="10" fill="#999"/>
251:     <rect x="140" y="100" width="10" height="10" fill="#999"/>
252:     <rect x="150" y="100" width="10" height="10" fill="#999"/>
253:     <rect x="160" y="100" width="10" height="10" fill="#999"/>
254:     <rect x="170" y="100" width="10" height="10" fill="#999"/>
255:     <rect x="180" y="100" width="10" height="10" fill="#999"/>
256:     <rect x="190" y="100" width="10" height="10" fill="#999"/>
257:     <rect x="200" y="100" width="10" height="10" fill="#999"/>
258:     <rect x="210" y="100" width="10" height="10" fill="#999"/>
259:     <rect x="220" y="100" width="10" height="10" fill="#999"/>
260:     <rect x="230" y="100" width="10" height="10" fill="#999"/>
261:     <rect x="240" y="100" width="10" height="10" fill="#999"/>
262:     <rect x="250" y="100" width="10" height="10" fill="#999"/>
263:     <rect x="260" y="100" width="10" height="10" fill="#999"/>
264:     <rect x="20" y="110" width="10" height="10" fill="#000"/>
265:     <rect x="30" y="110" width="10" height="10" fill="#000"/>
266:     <rect x="40" y="110" width="10" height="10" fill="#000"/>
267:     <rect x="50" y="110" width="10" height="10" fill="#000"/>
268:     <rect x="60" y="110" width="10" height="10" fill="#000"/>
269:     <rect x="70" y="110" width="10" height="10" fill="#000"/>
270:     <rect x="80" y="110" width="10" height="10" fill="#000"/>
271:     <rect x="90" y="110" width="10" height="10" fill="#000"/>
272:     <rect x="100" y="110" width="10" height="10" fill="#000"/>
273:     <rect x="110" y="110" width="10" height="10" fill="#000"/>
274:     <rect x="120" y="110" width="10" height="10" fill="#000"/>
275:     <rect x="130" y="110" width="10" height="10" fill="#000"/>
276:     <rect x="140" y="110" width="10" height="10" fill="#000"/>
277:     <rect x="150" y="110" width="10" height="10" fill="#000"/>
278:     <rect x="160" y="110" width="10" height="10" fill="#000"/>
279:     <rect x="170" y="110" width="10" height="10" fill="#000"/>
280:     <rect x="180" y="110" width="10" height="10" fill="#000"/>
281:     <rect x="190" y="110" width="10" height="10" fill="#000"/>
282:     <rect x="200" y="110" width="10" height="10" fill="#000"/>
283:     <rect x="210" y="110" width="10" height="10" fill="#000"/>
284:     <rect x="220" y="110" width="10" height="10" fill="#000"/>
285:     <rect x="230" y="110" width="10" height="10" fill="#000"/>
286:     <rect x="240" y="110" width="10" height="10" fill="#000"/>
287:     <rect x="250" y="110" width="10" height="10" fill="#000"/>
288:     <rect x="260" y="110" width="10" height="10" fill="#000"/>
289:   </g>
290: 
291:   <!-- 2. Gruppe mit 150 rect-Elementen -->
292:   <g id="gruppe2">
293:     <rect x="20" y="130" width="10" height="10" fill="#FF0"/>
294:     <rect x="30" y="130" width="10" height="10" fill="#FF0"/>
295:     <rect x="40" y="130" width="10" height="10" fill="#FF0"/>
296:     <rect x="50" y="130" width="10" height="10" fill="#FF0"/>
297:     <rect x="60" y="130" width="10" height="10" fill="#FF0"/>
298:     <rect x="70" y="130" width="10" height="10" fill="#FF0"/>
299:     <rect x="80" y="130" width="10" height="10" fill="#FF0"/>
300:     <rect x="90" y="130" width="10" height="10" fill="#FF0"/>
301:     <rect x="100" y="130" width="10" height="10" fill="#FF0"/>
302:     <rect x="110" y="130" width="10" height="10" fill="#FF0"/>
303:     <rect x="120" y="130" width="10" height="10" fill="#FF0"/>
304:     <rect x="130" y="130" width="10" height="10" fill="#FF0"/>
305:     <rect x="140" y="130" width="10" height="10" fill="#FF0"/>
306:     <rect x="150" y="130" width="10" height="10" fill="#FF0"/>
307:     <rect x="160" y="130" width="10" height="10" fill="#FF0"/>
308:     <rect x="170" y="130" width="10" height="10" fill="#FF0"/>
309:     <rect x="180" y="130" width="10" height="10" fill="#FF0"/>
310:     <rect x="190" y="130" width="10" height="10" fill="#FF0"/>
311:     <rect x="200" y="130" width="10" height="10" fill="#FF0"/>
312:     <rect x="210" y="130" width="10" height="10" fill="#FF0"/>
313:     <rect x="220" y="130" width="10" height="10" fill="#FF0"/>
314:     <rect x="230" y="130" width="10" height="10" fill="#FF0"/>
315:     <rect x="240" y="130" width="10" height="10" fill="#FF0"/>
316:     <rect x="250" y="130" width="10" height="10" fill="#FF0"/>
317:     <rect x="260" y="130" width="10" height="10" fill="#FF0"/>
318:     <rect x="20" y="140" width="10" height="10" fill="#F00"/>
319:     <rect x="30" y="140" width="10" height="10" fill="#F00"/>
320:     <rect x="40" y="140" width="10" height="10" fill="#F00"/>
321:     <rect x="50" y="140" width="10" height="10" fill="#F00"/>
322:     <rect x="60" y="140" width="10" height="10" fill="#F00"/>
323:     <rect x="70" y="140" width="10" height="10" fill="#F00"/>
324:     <rect x="80" y="140" width="10" height="10" fill="#F00"/>
325:     <rect x="90" y="140" width="10" height="10" fill="#F00"/>
326:     <rect x="100" y="140" width="10" height="10" fill="#F00"/>
327:     <rect x="110" y="140" width="10" height="10" fill="#F00"/>
328:     <rect x="120" y="140" width="10" height="10" fill="#F00"/>
329:     <rect x="130" y="140" width="10" height="10" fill="#F00"/>
330:     <rect x="140" y="140" width="10" height="10" fill="#F00"/>
331:     <rect x="150" y="140" width="10" height="10" fill="#F00"/>
332:     <rect x="160" y="140" width="10" height="10" fill="#F00"/>
333:     <rect x="170" y="140" width="10" height="10" fill="#F00"/>
334:     <rect x="180" y="140" width="10" height="10" fill="#F00"/>
335:     <rect x="190" y="140" width="10" height="10" fill="#F00"/>
336:     <rect x="200" y="140" width="10" height="10" fill="#F00"/>
337:     <rect x="210" y="140" width="10" height="10" fill="#F00"/>
338:     <rect x="220" y="140" width="10" height="10" fill="#F00"/>
339:     <rect x="230" y="140" width="10" height="10" fill="#F00"/>
340:     <rect x="240" y="140" width="10" height="10" fill="#F00"/>
341:     <rect x="250" y="140" width="10" height="10" fill="#F00"/>
342:     <rect x="260" y="140" width="10" height="10" fill="#F00"/>
343:     <rect x="20" y="150" width="10" height="10" fill="#090"/>
344:     <rect x="30" y="150" width="10" height="10" fill="#090"/>
345:     <rect x="40" y="150" width="10" height="10" fill="#090"/>
346:     <rect x="50" y="150" width="10" height="10" fill="#090"/>
347:     <rect x="60" y="150" width="10" height="10" fill="#090"/>
348:     <rect x="70" y="150" width="10" height="10" fill="#090"/>
349:     <rect x="80" y="150" width="10" height="10" fill="#090"/>
350:     <rect x="90" y="150" width="10" height="10" fill="#090"/>
351:     <rect x="100" y="150" width="10" height="10" fill="#090"/>
352:     <rect x="110" y="150" width="10" height="10" fill="#090"/>
353:     <rect x="120" y="150" width="10" height="10" fill="#090"/>
354:     <rect x="130" y="150" width="10" height="10" fill="#090"/>
355:     <rect x="140" y="150" width="10" height="10" fill="#090"/>
356:     <rect x="150" y="150" width="10" height="10" fill="#090"/>
357:     <rect x="160" y="150" width="10" height="10" fill="#090"/>
358:     <rect x="170" y="150" width="10" height="10" fill="#090"/>
359:     <rect x="180" y="150" width="10" height="10" fill="#090"/>
360:     <rect x="190" y="150" width="10" height="10" fill="#090"/>
361:     <rect x="200" y="150" width="10" height="10" fill="#090"/>
362:     <rect x="210" y="150" width="10" height="10" fill="#090"/>
363:     <rect x="220" y="150" width="10" height="10" fill="#090"/>
364:     <rect x="230" y="150" width="10" height="10" fill="#090"/>
365:     <rect x="240" y="150" width="10" height="10" fill="#090"/>
366:     <rect x="250" y="150" width="10" height="10" fill="#090"/>
367:     <rect x="260" y="150" width="10" height="10" fill="#090"/>
368:     <rect x="20" y="160" width="10" height="10" fill="#00C"/>
369:     <rect x="30" y="160" width="10" height="10" fill="#00C"/>
370:     <rect x="40" y="160" width="10" height="10" fill="#00C"/>
371:     <rect x="50" y="160" width="10" height="10" fill="#00C"/>
372:     <rect x="60" y="160" width="10" height="10" fill="#00C"/>
373:     <rect x="70" y="160" width="10" height="10" fill="#00C"/>
374:     <rect x="80" y="160" width="10" height="10" fill="#00C"/>
375:     <rect x="90" y="160" width="10" height="10" fill="#00C"/>
376:     <rect x="100" y="160" width="10" height="10" fill="#00C"/>
377:     <rect x="110" y="160" width="10" height="10" fill="#00C"/>
378:     <rect x="120" y="160" width="10" height="10" fill="#00C"/>
379:     <rect x="130" y="160" width="10" height="10" fill="#00C"/>
380:     <rect x="140" y="160" width="10" height="10" fill="#00C"/>
381:     <rect x="150" y="160" width="10" height="10" fill="#00C"/>
382:     <rect x="160" y="160" width="10" height="10" fill="#00C"/>
383:     <rect x="170" y="160" width="10" height="10" fill="#00C"/>
384:     <rect x="180" y="160" width="10" height="10" fill="#00C"/>
385:     <rect x="190" y="160" width="10" height="10" fill="#00C"/>
386:     <rect x="200" y="160" width="10" height="10" fill="#00C"/>
387:     <rect x="210" y="160" width="10" height="10" fill="#00C"/>
388:     <rect x="220" y="160" width="10" height="10" fill="#00C"/>
389:     <rect x="230" y="160" width="10" height="10" fill="#00C"/>
390:     <rect x="240" y="160" width="10" height="10" fill="#00C"/>
391:     <rect x="250" y="160" width="10" height="10" fill="#00C"/>
392:     <rect x="260" y="160" width="10" height="10" fill="#00C"/>
393:     <rect x="20" y="170" width="10" height="10" fill="#999"/>
394:     <rect x="30" y="170" width="10" height="10" fill="#999"/>
395:     <rect x="40" y="170" width="10" height="10" fill="#999"/>
396:     <rect x="50" y="170" width="10" height="10" fill="#999"/>
397:     <rect x="60" y="170" width="10" height="10" fill="#999"/>
398:     <rect x="70" y="170" width="10" height="10" fill="#999"/>
399:     <rect x="80" y="170" width="10" height="10" fill="#999"/>
400:     <rect x="90" y="170" width="10" height="10" fill="#999"/>
401:     <rect x="100" y="170" width="10" height="10" fill="#999"/>
402:     <rect x="110" y="170" width="10" height="10" fill="#999"/>
403:     <rect x="120" y="170" width="10" height="10" fill="#999"/>
404:     <rect x="130" y="170" width="10" height="10" fill="#999"/>
405:     <rect x="140" y="170" width="10" height="10" fill="#999"/>
406:     <rect x="150" y="170" width="10" height="10" fill="#999"/>
407:     <rect x="160" y="170" width="10" height="10" fill="#999"/>
408:     <rect x="170" y="170" width="10" height="10" fill="#999"/>
409:     <rect x="180" y="170" width="10" height="10" fill="#999"/>
410:     <rect x="190" y="170" width="10" height="10" fill="#999"/>
411:     <rect x="200" y="170" width="10" height="10" fill="#999"/>
412:     <rect x="210" y="170" width="10" height="10" fill="#999"/>
413:     <rect x="220" y="170" width="10" height="10" fill="#999"/>
414:     <rect x="230" y="170" width="10" height="10" fill="#999"/>
415:     <rect x="240" y="170" width="10" height="10" fill="#999"/>
416:     <rect x="250" y="170" width="10" height="10" fill="#999"/>
417:     <rect x="260" y="170" width="10" height="10" fill="#999"/>
418:     <rect x="20" y="180" width="10" height="10" fill="#000"/>
419:     <rect x="30" y="180" width="10" height="10" fill="#000"/>
420:     <rect x="40" y="180" width="10" height="10" fill="#000"/>
421:     <rect x="50" y="180" width="10" height="10" fill="#000"/>
422:     <rect x="60" y="180" width="10" height="10" fill="#000"/>
423:     <rect x="70" y="180" width="10" height="10" fill="#000"/>
424:     <rect x="80" y="180" width="10" height="10" fill="#000"/>
425:     <rect x="90" y="180" width="10" height="10" fill="#000"/>
426:     <rect x="100" y="180" width="10" height="10" fill="#000"/>
427:     <rect x="110" y="180" width="10" height="10" fill="#000"/>
428:     <rect x="120" y="180" width="10" height="10" fill="#000"/>
429:     <rect x="130" y="180" width="10" height="10" fill="#000"/>
430:     <rect x="140" y="180" width="10" height="10" fill="#000"/>
431:     <rect x="150" y="180" width="10" height="10" fill="#000"/>
432:     <rect x="160" y="180" width="10" height="10" fill="#000"/>
433:     <rect x="170" y="180" width="10" height="10" fill="#000"/>
434:     <rect x="180" y="180" width="10" height="10" fill="#000"/>
435:     <rect x="190" y="180" width="10" height="10" fill="#000"/>
436:     <rect x="200" y="180" width="10" height="10" fill="#000"/>
437:     <rect x="210" y="180" width="10" height="10" fill="#000"/>
438:     <rect x="220" y="180" width="10" height="10" fill="#000"/>
439:     <rect x="230" y="180" width="10" height="10" fill="#000"/>
440:     <rect x="240" y="180" width="10" height="10" fill="#000"/>
441:     <rect x="250" y="180" width="10" height="10" fill="#000"/>
442:     <rect x="260" y="180" width="10" height="10" fill="#000"/>
443:   </g>
444: 
445: </svg>

[zum Anfang]