SVG – Learning by Coding

[ pfeiltasten.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 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]