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 03/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getDocRoot(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,svgroot;
22:
23:
24: function getDocRoot(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: svgroot=svgdoc.documentElement;
28: }
29:
30:
31: // Variante 1
32:
33: function setTop1(click_evt)
34: {
35: var objekt;
36:
37: objekt=click_evt.target;
38:
39: svgroot.removeChild(objekt);
40: svgroot.appendChild(objekt);
41: }
42:
43:
44: // Variante 2
45:
46: function setTop2(click_evt)
47: {
48: var objekt,tempobj;
49:
50: objekt=click_evt.target;
51: tempobj=parseXML(printNode(objekt),svgdoc);
52:
53: svgroot.removeChild(objekt);
54: svgroot.appendChild(tempobj);
55: }
56:
57: ]]>
58: </script>
59:
60: </defs>
61:
62: <text x="20" y="30" style="fill: #000; font-size: 24px">
63: Objekte in den Vordergrund bringen</text>
64:
65: <!-- zwei Rechtecke mit Aufruf von setTop1() -->
66:
67: <rect x="50" y="125" width="200" height="150"
68: style="fill: #090; stroke: #000" onclick="setTop1(evt)"/>
69:
70: <rect x="150" y="150" width="200" height="150"
71: style="fill: #00C; stroke: #000" onclick="setTop1(evt)"/>
72:
73: <!-- zwei Rechtecke mit Aufruf von setTop2() -->
74:
75: <rect x="190" y="110" width="200" height="150"
76: style="fill: #FF0; stroke: #000" onclick="setTop2(evt)"/>
77:
78: <rect x="100" y="70" width="200" height="150"
79: style="fill: #F00; stroke: #000" onclick="setTop2(evt)"/>
80:
81: <text x="150" y="350">Rechtecke anklicken!</text>
82:
83: </svg>
[zum Anfang]
