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:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14:
15: <defs>
16:
17: <script type="text/javascript">
18: <![CDATA[
19:
20: function newMatrix(click_evt)
21: {
22: var svgdoc,svgroot,objekt,newmat1,newmat2,produkt,a,b,c,d,e,f,matrix;
23:
24: svgdoc=click_evt.target.ownerDocument;
25: svgroot=svgdoc.documentElement;
26:
27: // translate(100,50)
28: newmat1=svgroot.createSVGMatrix();
29: newmat1.a=1;
30: newmat1.b=0;
31: newmat1.c=0;
32: newmat1.d=1;
33: newmat1.e=100;
34: newmat1.f=50;
35:
36: // scale(2,2)
37: newmat2=svgroot.createSVGMatrix();
38: newmat2.a=2;
39: newmat2.b=0;
40: newmat2.c=0;
41: newmat2.d=2;
42: newmat2.e=0;
43: newmat2.f=0;
44:
45: // Matrix-Multiplikation von newmat1 und newmat2
46: produkt=newmat1.multiply(newmat2);
47:
48: // matrix()-Schreibweise erzeugen
49: a=produkt.a;
50: b=produkt.b
51: c=produkt.c
52: d=produkt.d
53: e=produkt.e
54: f=produkt.f;
55: matrix="matrix("+a+","+b+","+c+","+d+","+e+","+f+")";
56: alert("Produktmatrix: "+matrix);
57:
58: // Transformation auf das Rechteck anwenden
59: objekt=svgroot.getElementById("rechteck");
60: objekt.setAttribute("transform",matrix);
61: }
62:
63: ]]>
64: </script>
65:
66: </defs>
67:
68: <text x="20" y="30" style="fill: #000; font-size: 24px">
69: Transformationen über die DOM-Methode createSVGMatrix()
70: </text>
71:
72: <rect id="rechteck" x="50" y="100" width="150" height="75"
73: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="newMatrix(evt)"/>
74:
75: <text x="30" y="65">Es werden zwei Matrizen erzeugt [translate(100,50) und scale(2,2)],
76: mit multiply() multipliziert und auf das Rechteck angewendet.</text>
77: <text x="210" y="140">Rechteck anklicken!</text>
78:
79: </svg>
[zum Anfang]
