SVG – Learning by Coding

[ matrix_onthefly2.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:       text
 22:       {
 23:         fill#F00;
 24:         font-size12px;
 25:       }
 26: 
 27:       ]]>
 28:     </style>
 29: 
 30: 
 31:     <script type="text/javascript">
 32:       <![CDATA[
 33: 
 34:       var svgdoc,svgroot;
 35: 
 36: 			
 37:       function getSVGDoc(load_evt)
 38:       {
 39:         svgdoc=load_evt.target.ownerDocument;
 40:         svgroot=svgdoc.documentElement;
 41:       }
 42: 
 43: 
 44:       function newMatrix(x)
 45:       {
 46:         var objekt,basismatrix,ergebnismatrix,a,b,c,d,e,f,matrix;
 47: 
 48:         basismatrix=svgroot.createSVGMatrix();
 49: 
 50:         if(x==1)ergebnismatrix=basismatrix.translate(270,100);
 51:         if(x==2)
 52:         {          
 53:           // entspricht rotate(90,70,300)
 54:           ergebnismatrix=basismatrix.translate(70,300);
 55:           ergebnismatrix=ergebnismatrix.rotate(90);
 56:           ergebnismatrix=ergebnismatrix.translate(-70,-300);
 57:         }
 58:         if(x==3)
 59:         {          
 60:           // entspricht scale(0.5) und translate(400,0)
 61:           ergebnismatrix=basismatrix.scale(0.5);
 62:           ergebnismatrix=ergebnismatrix.translate(400,0);
 63:         }
 64:         if(x==4)ergebnismatrix=basismatrix.scaleNonUniform(0.75,0.5);
 65:         if(x==5)ergebnismatrix=basismatrix.skewX(30);
 66:         if(x==6)ergebnismatrix=basismatrix.skewY(45);
 67: 
 68:         // weitere Matrix-Methoden:
 69:         // rotateFromVector(), flipX(), flipY(), multiply(), inverse()
 70: 
 71:         // matrix()-Schreibweise erzeugen
 72:         a=ergebnismatrix.a;
 73:         b=ergebnismatrix.b;
 74:         c=ergebnismatrix.c;
 75:         d=ergebnismatrix.d;
 76:         e=ergebnismatrix.e;
 77:         f=ergebnismatrix.f;
 78:         matrix="matrix("+a+","+b+","+c+","+d+","+e+","+f+")";
 79:         alert("Ergebnis-Matrix: "+matrix);
 80: 
 81:         // Transformation auf das Rechteck anwenden
 82:         objekt=svgroot.getElementById("rechteck"+x);
 83:         objekt.setAttribute("transform",matrix);
 84:       }
 85: 
 86:       ]]>
 87:     </script>
 88: 
 89:   </defs>
 90: 
 91:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 92:    Anwendung weiterer Matrix-Methoden
 93:   </text>
 94: 
 95:   <rect id="rechteck1" x="50" y="100" width="150" height="75"
 96:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
 97: 
 98:   <rect id="rechteck2" x="50" y="100" width="150" height="75"
 99:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
100: 
101:   <rect id="rechteck3" x="50" y="100" width="150" height="75"
102:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
103: 
104:   <rect id="rechteck4" x="50" y="100" width="150" height="75"
105:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
106: 
107:   <rect id="rechteck5" x="50" y="100" width="150" height="75"
108:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
109: 
110:   <rect id="rechteck6" x="50" y="100" width="150" height="75"
111:     style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/>
112: 
113:   <text x="320" y="65" style="fill: #000">
114:     Es werden Transformationen mit Matrix-Methoden ausgeführt.</text>
115:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="90" onclick="newMatrix(1)">
116:     basismatrix.translate(270,100)</text></a>
117:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="110" onclick="newMatrix(2)">
118:     basismatrix.rotate(90,70,300)</text></a>
119:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="130" onclick="newMatrix(3)">
120:     basismatrix.scale(0.5) + translate(400,0)</text></a>
121:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="150" onclick="newMatrix(4)">
122:     basismatrix.scaleNonUniform(0.75,0.5)</text></a>
123:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="170" onclick="newMatrix(5)">
124:     basismatrix.skewX(30)</text></a>
125:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="320" y="190" onclick="newMatrix(6)">
126:     basismatrix.skewY(45)</text></a>
127: 	
128: </svg>

[zum Anfang]