SVG – Learning by Coding

[ replaceChild.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 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]