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 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-size: 12px;
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]