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: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
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-Baum) vor 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]
