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 12/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,svgroot,block,l,r,o,u;
22:
23:
24: function Init(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: svgroot=svgdoc.rootElement;
28:
29: block=svgdoc.getElementById("block");
30: l=svgdoc.getElementById("l");
31: r=svgdoc.getElementById("r");
32: o=svgdoc.getElementById("o");
33: u=svgdoc.getElementById("u");
34:
35: svgroot.addEventListener("keydown",KeyCheck,false);
36: }
37:
38:
39: function KeyCheck(keydown_evt)
40: {
41: var aktmat,keynum,matrix,a,b,c,d,e,f;
42:
43: aktmat=block.getCTM(); // aktuelle Transformationsmatrix ermitteln
44: a=aktmat.a;
45: b=aktmat.b;
46: c=aktmat.c;
47: d=aktmat.d;
48: e=aktmat.e;
49: f=aktmat.f;
50:
51: keynum=keydown_evt.keyCode; // Tastencode verarbeiten
52: if(keynum==37 && e>0)e-=10; // Pfeiltaste links
53: if(keynum==38 && f>0)f-=10; // Pfeiltaste oben
54: if(keynum==39 && e<580)e+=10; // Pfeiltaste rechts
55: if(keynum==40 && f<380)f+=10; // Pfeiltaste unten
56:
57: // rote Richtungspfeile in der Grafik verstecken oder anzeigen
58: if(e==0)l.setAttribute("visibility","hidden");
59: else l.setAttribute("visibility","visible");
60:
61: if(e==580)r.setAttribute("visibility","hidden");
62: else r.setAttribute("visibility","visible");
63:
64: if(f==0)o.setAttribute("visibility","hidden");
65: else o.setAttribute("visibility","visible");
66:
67: if(f==380)u.setAttribute("visibility","hidden");
68: else u.setAttribute("visibility","visible");
69:
70: // neue Transformationsmatrix anwenden
71: matrix="matrix("+a+","+b+","+c+","+d+","+e+","+f+")";
72: block.setAttribute("transform",matrix);
73:
74: keydown_evt.stopPropagation(); // Tastaturereignis nicht weiter geben
75: }
76:
77:
78: function Reset()
79: {
80: // Richtungspfeile verstecken oder anzeigen
81: l.setAttribute("visibility","hidden");
82: r.setAttribute("visibility","visible");
83: o.setAttribute("visibility","hidden");
84: u.setAttribute("visibility","visible");
85:
86: // Objekt-Gruppe mittels Basismatrix auf den Ausgangspunkt setzen
87: block.setAttribute("transform","matrix(1,0,0,1,0,0)");
88: }
89:
90: ]]>
91: </script>
92:
93: </defs>
94:
95: <text x="20" y="30" style="fill: #000; font-size: 24px">
96: Pfeil-Tasten abfragen und Objekte steuern</text>
97:
98: <text x="20" y="50" style="fill: #000; font-size: 12px">
99: [Zunächst durch Anklicken des Aktionsbereiches den Fokus setzen.]</text>
100: <rect x="20" y="60" width="600" height="400" fill="#FFF" stroke="#CCC"/>
101:
102: <g id="block">
103: <rect x="20" y="60" width="20" height="20" fill="#00C" onclick="Reset()"/>
104: <polygon id="l" points="20,65 15,70 20,75" fill="#F00" visibility="hidden"/>
105: <polygon id="r" points="40,65 45,70 40,75" fill="#F00" visibility="visible"/>
106: <polygon id="o" points="25,60 30,55 35,60" fill="#F00" visibility="hidden"/>
107: <polygon id="u" points="25,80 30,85 35,80" fill="#F00" visibility="visible"/>
108: </g>
109:
110: </svg>
[zum Anfang]
