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]
