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 01/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: <script type="text/javascript">
19: <![CDATA[
20:
21: var svgdoc;
22:
23:
24: function Init(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: setTimeout("ObjekteErsetzen()",5000);
28: }
29:
30:
31: function ObjekteErsetzen()
32: {
33: var rects,rect_anz,rect_obj,rect_x,rect_y,rect_b,rect_h,
34: circle_obj,circle_x,circle_y,circle_r,circle_f,
35: svgns="http://www.w3.org/2000/svg";
36:
37: rects=svgdoc.getElementsByTagName("rect");
38: rect_anz=rects.length;
39:
40: for(i=rect_anz-1;i>=0;i--)
41: {
42: // aktuelles rect-Object abfragen
43: rect_obj=rects.item(i);
44: rect_x=rect_obj.getAttribute("x")*1;
45: rect_y=rect_obj.getAttribute("y")*1;
46: rect_b=rect_obj.getAttribute("width")*1;
47: rect_h=rect_obj.getAttribute("height")*1;
48:
49: // Eigenschaften fuer neues circle-Objekt ermitteln
50: circle_f=rect_obj.getAttribute("fill");
51: circle_x=rect_x+rect_b/2;
52: circle_y=rect_y+rect_h/2;
53: circle_r=Math.min(rect_b,rect_h)/2;
54:
55: // neues circle-Objekt aufbauen
56: circle_obj=svgdoc.createElementNS(svgns,"circle");
57: circle_obj.setAttribute("cx",circle_x);
58: circle_obj.setAttribute("cy",circle_y);
59: circle_obj.setAttribute("r",circle_r);
60: circle_obj.setAttribute("fill",circle_f);
61:
62: // aktuelles rect-Object durch neues circle-Objekt ersetzen
63: rect_obj.parentNode.replaceChild(circle_obj,rect_obj);
64: }
65: }
66:
67: ]]>
68: </script>
69:
70: </defs>
71:
72: <text x="20" y="30" style="fill: #000; font-size: 24px">
73: Knoten mit replaceChild() ersetzen</text>
74: <text x="20" y="50" style="font-size: 12px">
75: Nach 5 Sekunden werden die rect-Elemente durch circle-Elemente ersetzt.</text>
76:
77: <rect x="100" y="70" width="40" height="20" fill="#FF0"/>
78: <rect x="120" y="90" width="60" height="30" fill="#F00"/>
79: <rect x="150" y="120" width="80" height="40" fill="#090"/>
80: <rect x="190" y="160" width="100" height="50" fill="#00C"/>
81: <rect x="240" y="210" width="120" height="60" fill="#000"/>
82:
83: </svg>
[zum Anfang]
