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]
