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]
