Transformationen
Mit dem attribut transform="..." werden „ausgebende“ Elemente in ihrem Koordinatensystem modifiziert. Das heißt, dass das transformierte Element ein verändertes Koordinatensystem zum <svg>-Element erhält.
Die folgenden Transformationsanweisungen bewirken:
Rotieren: rotate, Skalieren: scale, Verschieben: translate und Verzerren skew
(Für mich eigentlich auch wieder Attribute, deren Attributwerte die Veränderungen zum Transformationsobjekt auslösen.)
| transformAttribute | ||||||||||||||||||||||
| rotate |
transform="rotate(0 )" transform="rotate(Winkel [x y])"Ohne die optionalen x- und y-Werte befindet sich der Drehpunkt x="0" y="0", also links oben. Keine Ahnung wem da ein Zugeständnis gemacht wurde, für mich ist das, wenn rotiert: oder . Ansicht des Quellcodes |
|||||||||||||||||||||
| scale | ... steht für Größenänderung/Streckung als auch Spiegelung. Auch hier wird von links oben das transformierende Objekt berechnet. Um das Objekt im Zentrum zu halten, muss mit translate korrigiert werden. Angabe eines Wertes: Zahl > 1 vergrößert, Zahl < 1 verkleinert, Null atomisiert den Vektorraum, negative Zahl spiegelt um die Koordinaten x="0" y="0" und wird somit außerhalb der viewBox gerendert (wenn nicht nachjustiert). Dafür ist der MSIE wieder gut! Da kann man erst mal beobachten, wo das Ding zum Liegen kommt. Ansonsten nervts, dass der auch außerhalb der viewBox rendert. 1. transform="scale( Zahl > 0 or negativ )" 2. transform="scale( 1, .5 )" 3. transform="scale( -1, 1 )" 4. transform="scale( 1, -1 )"1. Größenänderung || Spiegelung 2. verticale Stauchung 3. spiegelt vertikal 4. spiegelt horizontal Ansicht des Quellcodes |
Leider bekomme ich die Schiebereglerstellung nach Umschalten nicht auf Gleichheit.
Chrome und Opera reagieren garnicht auf regler.setAttribute("value",wert) !
Dem Experementieren tuts aber keinen Abbruch.
|
||||||||||||||||||||
| translate |
Verschieben von Elementen und Elementgruppen: transform="translate(x)" Wenn zweiter Wert, dann wird y verschoben. Negative Werte sind möglich. Und warum nicht gleich ein Element mit x und y positionieren? Tja (!?!) Weil hiermit beinhaltete Effekt-/Filterbereiche mit transformiert werden. Beispiel: Es wird mit transform="translate(...)" der mit einem Filter behandelte Schriftzug verschoben und der Filterbereich gehört dazu! Anders verhält es sich, wenn der Schriftzug ein neue Position erhält. Am Beispiel nur die y-Verschiebung eingearbeitet. Der Filterbereich ist hellblau unterlegt, nur zur Orientierung. Befindet sich die Schrift nun auch nur teilweise im Filterbereich, dann wird auch nur dies gerendert. Alles klar? Ansicht des Quellcodes |
|
||||||||||||||||||||
| skew | Die Verzerrungsattribute für die x-/y-Achsen werden getrennt notiert: skewY(..) skewX(..). Der Verzerrungsgrad wird als Zahl verstanden.
Kontrollausgabe für skewX(0) skewY(0) Da für jeden Winkel ein eigenständiges Attribut benutzt wird, ist die Reihenfolge entgegen sonstiger Befindlichkeiten unerheblich. skewX verzerrt auf der x-Achse über die Winkelangabe, die auf die y-Achse wirkt. skewY verzerrt auf der y-Achse über die Winkelangabe, die auf die x-Achse wirkt. Was soll ich da sagen: „dat is halt so!“ Am Beispiel wird mit transform='translate(100,100)' das Rechteck mit der Kantenlänge von 200px ins Zentrum verschoben, damit es nach allen Seiten deutlich wird. Somit wird auch die Verzerrung mit dem Ursprung x='0' und y='0' um diesen wirksam und nicht von der Mitte aus. Das <polygon id='polyform' points='0 0, 200 0, 190 10, 10 10, 0 0' /> wird von seiner natürlichen Position x='0' und y='0' beschrieben. Das Polygon-Element wird dann nur noch dreimal gedreht. Ansicht des Quellcodes Beispiel 1: |
|
||||||||||||||||||||