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 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-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: rect
28: {
29: stroke: white;
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<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: Fazit: Zum Entfernen (sehr) groß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]
