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 02/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getSVGDoc(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,svgroot,nr=0;
35:
36:
37: function getSVGDoc(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: svgroot=svgdoc.rootElement;
41: svgroot.addEventListener("keypress",Key,false);
42: }
43:
44:
45: function SetNr(nummer)
46: {
47: nr=nummer;
48: }
49:
50:
51: function Key(keypress_evt)
52: {
53: var keynum,keychar,textobj,lineobj,text,lt,lx;
54:
55: if(nr>0)
56: {
57: // aus Zeichencode Zeichen ermitteln
58: keynum=keypress_evt.charCode;
59: keychar=String.fromCharCode(keynum);
60:
61: // Text auslesen und hinzufuegen
62: textobj=svgdoc.getElementById("feld"+nr);
63: lineobj=svgdoc.getElementById("cur"+nr);
64: text=textobj.firstChild.data;
65: if(text.charAt(0)==" ")text=text.substring(1,text.length);
66:
67: if(keynum>=32 && keynum<=255)text+=keychar;
68: if(keynum==32 && text.length==1)text="";
69: if(text.length>1)lt=textobj.getComputedTextLength();
70: if(keynum==8 || lt>135)text=text.substring(0,text.length-1);
71:
72: // Text ausgeben
73: textobj.firstChild.data=text;
74:
75: // Textcursor nach rechts verschieben
76: if(text.length>0)lx=62+textobj.getComputedTextLength();
77: else lx=61;
78: lineobj.setAttribute("x1",lx);
79: lineobj.setAttribute("x2",lx);
80: }
81: }
82:
83:
84: function Feldinhalt(nr)
85: {
86: // aktuellen Feldinhalt ausgeben
87: var textobj,text;
88: textobj=svgdoc.getElementById("feld"+nr);
89: text=textobj.firstChild.data;
90: alert("Text"+nr+":\n"+text);
91: }
92:
93: ]]>
94: </script>
95:
96: </defs>
97:
98: <rect id="back" x="0" y="0" width="100%" height="100%" style="fill: #FFF"
99: onclick="SetNr(0)"/><!-- Rechteck fuer Hintergrund -->
100:
101: <text x="20" y="30" style="fill: #000; font-size: 24px">
102: Simulation von Eingabefeldern</text>
103:
104: <!-- erstes Textfeld aus Rechteck, Text und Cursor-Linie -->
105: <g id="box1" onclick="SetNr(1)">
106: <text x="20" y="75" style="pointer-events: none">Text1: </text>
107: <rect x="58" y="60" width="150" height="20"
108: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/>
109: <text id="feld1" x="60" y="75"> </text>
110: <line id="cur1" x1="61" y1="62" x2="61" y2="78"
111: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden">
112: <set attributeName="visibility" attributeType="CSS"
113: to="visible" begin="box1.click"/>
114: <set attributeName="visibility" attributeType="CSS"
115: to="hidden" begin="box2.click;box3.click;back.click"/>
116: </line>
117: </g>
118:
119: <!-- zweites Textfeld aus Rechteck, Text und Cursor-Linie -->
120: <g id="box2" onclick="SetNr(2)">
121: <text x="20" y="125" style="pointer-events: none">Text2: </text>
122: <rect x="58" y="110" width="150" height="20"
123: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/>
124: <text id="feld2" x="60" y="125"> </text>
125: <line id="cur2" x1="61" y1="112" x2="61" y2="128"
126: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden">
127: <set attributeName="visibility" attributeType="CSS"
128: to="visible" begin="box2.click"/>
129: <set attributeName="visibility" attributeType="CSS"
130: to="hidden" begin="box1.click;box3.click;back.click"/>
131: </line>
132: </g>
133:
134: <!-- drittes Textfeld aus Rechteck, Text und Cursor-Linie -->
135: <g id="box3" onclick="SetNr(3)">
136: <text x="20" y="175" style="pointer-events: none">Text3: </text>
137: <rect x="58" y="160" width="150" height="20"
138: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/>
139: <text id="feld3" x="60" y="175"> </text>
140: <line id="cur3" x1="61" y1="162" x2="61" y2="178"
141: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden">
142: <set attributeName="visibility" attributeType="CSS"
143: to="visible" begin="box3.click"/>
144: <set attributeName="visibility" attributeType="CSS"
145: to="hidden" begin="box1.click;box2.click;back.click"/>
146: </line>
147: </g>
148:
149: <a id="link1" xlink:href="">
150: <text x="220" y="75" style="fill: #00C" onclick="Feldinhalt(1)">
151: [Zeige Inhalt von Text1]
152: </text>
153: </a>
154:
155: <a id="link2" xlink:href="">
156: <text x="220" y="125" style="fill: #00C" onclick="Feldinhalt(2)">
157: [Zeige Inhalt von Text2]
158: </text>
159: </a>
160:
161: <a id="link3" xlink:href="">
162: <text x="220" y="175" style="fill: #00C" onclick="Feldinhalt(3)">
163: [Zeige Inhalt von Text3]
164: </text>
165: </a>
166:
167: </svg>
[zum Anfang]
