SVG – Learning by Coding

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

[zum Anfang]