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]
