nicht angemeldet
Hallo SVG-Entwickler,
im Rahmen meines Projektes "SVG - Learning By Coding" [http://www.datenverdrahten.de/svglbc/] habe ich ein kleines Hilfmittel entwickelt, welches im Folgenden vorgestellt werden soll.
SVG bietet auch so genannte Transformationen zum Verschieben [translate(dx,dy)], Neigen [skewX(winkel),skewY(winkel)], Rotieren [rotate(winkel)] und Skalieren [scale(x-faktor,y-faktor)].
Man kann jeweils auch eine Matrix-Schreibweise in der Form matrix(a,b,c,d,e,f) oder matrix(a b c d e f) verwenden (ich bevorzuge die Komma-separierte Variante), siehe: http://www.w3.org/TR/SVG/coords.html zur Ermittlung der Parameter a bis f und schließlich eine Gesamtmatrix fuer mehrfache Operationen gewinnen (durch Matrizenmultiplikation).
Bei komplexen Transformationen kann das einen Vorteil beim Rendern bedeuten, da bereits einige Rechenarbeit erledigt ist.
Beispiel:
Ein Rechteck soll nacheinander verschoben, in y-Richtung geneigt, rotiert, nochmals verschoben und skaliert werden. In der Ausgangsnotation sieht das im SVG-Code so aus:
<rect x="200" y="200" width="150" rx="5" ry="5" height="75" style="fill: #FFC; stroke: #00C; stroke-width: 2px"
transform="translate(50,50) skewY(30) rotate(20) translate(0,-250) scale(0.5,0.5)"/>
Mit den unter der genannten Adresse ersichtlichen Umformungen erhaelt man in Matrix-Schreibweise:
<rect x="200" y="200" width="150" rx="5" ry="5" height="75" style="fill: #FFC; stroke: #00C; stroke-width: 2px"
transform="matrix(1,0,0,1,50,50) matrix(1,0.577350,0,1,0,0) matrix(0.939693,0.342020,-0.34202,0.939693,0,0) matrix(1,0,0,1,0,-250) matrix(0.5,0,0,0.5,0,0)"/>
und nach Vereinigung aller fuenf Matrizen:
<rect x="200" y="200" width="150" rx="5" ry="5" height="75" style="fill: #FFC; stroke: #00C; stroke-width: 2px"
transform="matrix(0.469846,0.442276,-0.171010,0.371114,135.505036,-135.556800)"/>
Die erstgenannte Schreibweise ist fuer den Menschen gut verstaendlich und nachvollziehbar, die letzteren wohl nur noch fuer die Maschinen ;-). Optisch ergibt sich (wie erwartet) kein Unterschied.
Die Umsetzung ist erkennbar muehsam und nachdem ich die matrix()-Moeglichkeiten mit Stift und Papier ausgelotet hatte, war natuerlich der Wunsch nach etwas Automatisierung da. Nun liegt ein kleines JavaScript-basiertes Tool vor, welches fuer einigermaßen DOM-faehige Browser gedacht ist [IE 5.x+, Netscape 6.x+, Mozilla, Opera 7.x]: http://www.datenverdrahten.de/svglbc/matrixcalc.htm.
Das gerade beschriebene Vorgehen zeigt dieser Screenshot: http://www.styleassistant.de/test/matrixcalc.png.
Es werden die einzelnen Transformationsschritte in die matrix()-Schreibweise umgesetzt und danach lassen sich aus 2 bis 10 Einzeltransformationen zusammenfassen und per Kopieren/Einfuegen uebernehmen.
Vielleicht hilft das einigen Leuten beim Einstieg in die durchaus faszinierende Materie. Im Vordergrund stand erstmal die Mathematik, so dass die Optik evtl. als suboptimal empfunden werden kann ...
MfG, Thomas