SVG – Learning by Coding

[ matrix_reverse.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 05/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);ShowResults(2.101802,0.954189,-1.331028,0.347296,20,30)">
 12: 
 13:   <!-- einige Versuchsparameter fuer MatrixReverse():
 14: 
 15:   matrix(0.606,0.350,-0.350,0.606,80,40) =
 16:   skewY(0translate(80,40rotate(30.008915scale(0.699811,0.699811skewX(0)
 17: 
 18:   matrix(0.922671,0.385587,-0.317494,0.94826,0,0) =
 19:   skewY(0translate(0,0rotate(22.680197scale(1.000000,0.997354skewX(4.157762)
 20: 
 21:   matrix(2.101802,0.954189,-1.331028,0.347296,20,30) =
 22:   skewY(0translate(20,30rotate(24.417391scale(2.308257,0.866455skewX(-24.837804)
 23: 
 24:   matrix(0.971193,-0.238295,0.196019,0.9806,100,130) =
 25:   skewY(0translate(100,130rotate(166.214071scale(-1.000000,-0.999062skewX(-2.479346)
 26: 
 27:   matrix(-0.814408,-0.580292,0.969382,-0.245558,450,375) =
 28:   skewY(0translate(450,400rotate(35.471099scale(-1.000000,-0.762509skewX(-32.901964)
 29: 
 30:   matrix(1.019499,0.207055,1.070792,1.159111,40.769400,-23.107890) =
 31:   skewY(0translate(40.7694,-23.10789rotate(11.480333scale(1.040312,0.922799skewX(50.899217)
 32: 
 33:   -->
 34: 
 35:   <title>SVG Learning By Coding</title>
 36:   <desc>SVG-Spezifikation in Beispielen</desc>
 37: 
 38:   <defs>
 39: 
 40:     <script type="text/javascript">
 41:       <![CDATA[
 42: 
 43:       var svgdoc;
 44: 
 45: 
 46:       function Init(load_evt)
 47:       {
 48:         svgdoc=load_evt.target.ownerDocument;
 49:       }
 50: 
 51: 
 52:       function SetRadio(click_evt)
 53:       {
 54:         svgdoc.getElementById("radi").setAttribute("cx",click_evt.target.getAttribute("cx"));
 55:         svgdoc.getElementById("radi").setAttribute("cy",click_evt.target.getAttribute("cy"));
 56:       }
 57: 
 58: 
 59:       function MatrixReverse(a,b,c,d,e,f)
 60:       {
 61:         /*
 62:             Zu den mathematischen Details der Umsetzung siehe:
 63:             http://svglbc.datenverdrahten.de/info/matrix_reverse1.htm
 64:             http://svglbc.datenverdrahten.de/info/matrix_reverse2.htm
 65:         */
 66: 
 67:         var tx,        // translate_x
 68:             ty,        // translate_y
 69:             ro,        // rotate_winkel
 70:             scx,       // scale_x
 71:             scy,       // scale_y
 72:             skx,       // skew_x_winkel
 73:             sky,       // skew_y_winkel
 74:             tanskx,    // Tangens von skx
 75:             tansky=0,  // Tangens von sky (frei waehlbar, Definitionsbereich beachten!)
 76:             cosro,     // Cosinus von ro
 77:             sinro,     // Sinus von ro
 78:             acosro,    // Arcuscosinus von ro
 79:             asinro,    // Arcussinus von ro
 80:             konst1,    // Konstante
 81:             konst2,    // Konstante
 82:             stellen=6// Anzahl Nachkommastellen
 83:             ergebnis;  // transform-Attributwert mit Komponenten
 84: 
 85:         konst1=a*a*tansky*tansky+a*a-2*a*b*tansky+b*b;
 86:         konst2=Math.sqrt(1/konst1);
 87:         if(a<|| b<0)konst2=-konst2;
 88: 
 89:         tanskx=(a*c+b*d-a*d*tansky-b*c*tansky+a*c*tansky*tansky)/konst1;
 90: 
 91:         skx=(Math.atan(tanskx)*180/Math.PI).toFixed(stellen);
 92:         sky=0;
 93:         // sofern tansky != 0 sky-Berechnung anpassen
 94:         // sky=(Math.atan(tansky)*180/Math.PI).toFixed(stellen);
 95: 
 96:         scx=(konst1*konst2).toFixed(stellen);
 97:         scy=((a*d-b*c)*konst2).toFixed(stellen);
 98: 
 99:         tx=e;
100:         ty=f-e*tansky;
101: 
102:         cosro=a*konst2;
103:         sinro=(b-a*tansky)*konst2;
104:         acosro=Math.acos(cosro);
105:         asinro=Math.asin(sinro);
106:         // ro-Spezialfall-Korrektur (asinro<0) von Peter Coppens 06/2007
107:         if(asinro<0)ro=(2*Math.PI-acosro)*180/Math.PI;
108:         else ro=acosro*180/Math.PI;
109:         ro=ro.toFixed(stellen);        
110: 
111:         // Wert des transform-Attributes zusammensetzen und ausgeben
112:         // (Reihenfolge der Abarbeitung von rechts nach links)
113: 
114:         ergebnis="skewY("+sky+") translate("+tx+","+ty+") rotate("+ro+
115:           ") scale("+scx+","+scy+") skewX("+skx+")";
116: 
117:         return ergebnis;
118:       }
119: 
120: 
121:       function ShowResults(a,b,c,d,e,f)
122:       {
123:         var eingabe,ausgabe;
124: 
125:         eingabe="matrix("+a+","+b+","+c+","+d+","+e+","+f+")";
126:         ausgabe=MatrixReverse(a,b,c,d,e,f);
127: 
128:         // transform-Attributwerte ausgeben
129:         svgdoc.getElementById("input").firstChild.nodeValue=
130:           "transform=\""+eingabe+"\"";
131:         svgdoc.getElementById("output").firstChild.nodeValue=
132:           "transform=\""+ausgabe+"\"";
133: 
134:         // Transformationen mit Rechtecken testen
135:         svgdoc.getElementById("mat").setAttribute("transform",eingabe);
136:         svgdoc.getElementById("rev").setAttribute("transform",ausgabe);
137:       }
138: 
139:       ]]>
140:     </script>
141: 
142:   </defs>
143: 
144:   <text x="20" y="30" style="fill: #000; font-size: 24px">
145:     Matrix-Transformationen in Komponenten zerlegen</text>
146: 
147:   <text id="input" x="20" y="60" font-size="14" fill="#00C">&#160;</text>
148:   <text id="output" x="20" y="80" font-size="14" fill="#F00">&#160;</text>
149:   <text x="20" y="120" font-size="12px" fill="#000">Hinweis: Die ausgehend vom 
150:     grünen Rechteck transformierten Rechtecke (rot blausollten dieselbe Lage
151:     einnehmen.</text>
152: 
153:   <!-- rotes Rechteck mit den separierten Transformationskomponenten -->
154:   <rect id="rev" x="200" y="150" width="100" height="50" fill="none" stroke="#F00"/>
155:   <!-- blaues Rechteck mit der gegebenen Matrix -->
156:   <rect id="mat" x="200" y="150" width="100" height="50" fill="none" stroke="#00C"
157:     stroke-dasharray="15,15"/>
158:   <!-- gruenes Ausgangsrechteck -->
159:   <rect x="200" y="150" width="100" height="50" fill="none" stroke="#090"/>
160: 
161:   <!-- Auswahl von Beispiel-Transformationen -->
162:   <g font-size="12px">
163:     <text x="45" y="155">Beispiel 1</text>
164:     <text x="45" y="175">Beispiel 2</text>
165:     <text x="45" y="195">Beispiel 3</text>
166:     <text x="45" y="215">Beispiel 4</text>
167:     <text x="45" y="235">Beispiel 5</text>
168:     <text x="45" y="255">Beispiel 6</text>
169:   </g>
170: 
171:   <circle id="radi" cx="30" cy="150" r="2" fill="#000"/><!-- Radio-Knopf innen -->
172: 
173:   <circle cx="30" cy="150" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
174:     "SetRadio(evt);ShowResults(2.101802,0.954189,-1.331028,0.347296,20,30)"/>
175: 
176:   <circle cx="30" cy="170" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
177:     "SetRadio(evt);ShowResults(0.922671,0.385587,-0.317494,0.94826,0,0)"/>
178: 
179:   <circle cx="30" cy="190" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
180:     "SetRadio(evt);ShowResults(1.019499,0.207055,1.070792,1.159111,40.769400,-23.107890)"/>
181: 
182:   <circle cx="30" cy="210" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
183:     "SetRadio(evt);ShowResults(0.606,0.350,-0.350,0.606,80,40)"/>
184: 
185:   <circle cx="30" cy="230" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
186:     "SetRadio(evt);ShowResults(-0.814408,-0.580292,0.969382,-0.245558,450,375)"/>
187: 
188:   <circle cx="30" cy="250" r="5" fill="none" stroke="#000" pointer-events="all" onclick=
189:     "SetRadio(evt);ShowResults(0.971193,-0.238295,0.196019,0.9806,100,130)"/>
190: 
191: </svg>

[zum Anfang]