SVG – Learning by Coding

[ eingabefelder.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-familysans-serif;
 24:         font-size12px;
 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==|| 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 RechteckText 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 RechteckText 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 RechteckText 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]