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 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(0) translate(80,40) rotate(30.008915) scale(0.699811,0.699811) skewX(0)
17:
18: matrix(0.922671,0.385587,-0.317494,0.94826,0,0) =
19: skewY(0) translate(0,0) rotate(22.680197) scale(1.000000,0.997354) skewX(4.157762)
20:
21: matrix(2.101802,0.954189,-1.331028,0.347296,20,30) =
22: skewY(0) translate(20,30) rotate(24.417391) scale(2.308257,0.866455) skewX(-24.837804)
23:
24: matrix(0.971193,-0.238295,0.196019,0.9806,100,130) =
25: skewY(0) translate(100,130) rotate(166.214071) scale(-1.000000,-0.999062) skewX(-2.479346)
26:
27: matrix(-0.814408,-0.580292,0.969382,-0.245558,450,375) =
28: skewY(0) translate(450,400) rotate(35.471099) scale(-1.000000,-0.762509) skewX(-32.901964)
29:
30: matrix(1.019499,0.207055,1.070792,1.159111,40.769400,-23.107890) =
31: skewY(0) translate(40.7694,-23.10789) rotate(11.480333) scale(1.040312,0.922799) skewX(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<0 || 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"> </text>
148: <text id="output" x="20" y="80" font-size="14" fill="#F00"> </text>
149: <text x="20" y="120" font-size="12px" fill="#000">Hinweis: Die ausgehend vom
150: grünen Rechteck transformierten Rechtecke (rot + blau) sollten 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]
