Elemente kippen

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Neben der rotate-Anweisung stellt das transform-Attribut auch noch die Anweisungen skewX und skewY zur Verfügung, über die Sie ein Element an der x- bzw. y-Achse kippen bzw. spiegeln können. Beiden Befehlen übergeben Sie als Parameter den Winkel.

Das tatsächliche Ergebnis ist jedoch auch abhängig davon, wie Sie die Elemente innerhalb des Koordinatensystems angeordnet haben, da sich der angegebene Winkel immer auf den Nullpunkt bezieht. Die folgende Abbildung verdeutlicht dies. Hier wurden zwei Texte mit den gleichen Einstellungen gekippt, die sich lediglich an anderen Positionen innerhalb des Koordinatensystems befinden. Zur Verdeutlichung des Ergebnisses werden die nicht gekippten Texte in Grau dargestellt.

Text auf der x-Achse um 20° kippen

Abbildung: Text auf der x-Achse um 20° kippen.

Der dazu notwendige Code sieht wie folgt aus:

<g transform="skewX(20)">
  <text x="150" y="130" style="font-family:'Arial Black';font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text>
  <text x="40" y="40" style="font-family:'Arial Black';font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text>
</g>

Hinweis:
Es ergibt keinen Unterschied, ob Sie eine Gruppe oder die einzelnen Elemente der Gruppe kippen, da sich der Winkel immer auf den Nullpunkt der Gruppe bzw. den Nullpunkt der Grafik bezieht.

Sie können alle Winkel zwischen 0 und 360° angeben. Allerdings werden Sie bei Angaben, die ein Vielfaches von 90° bilden, keine Änderungen feststellen.

Analog zur skewX-Anweisung können Sie skewY verwenden, um Elemente an der y-Achse zu kippen. Auch hier hängt der tatsächliche Effekt von der Position innerhalb des Koordinatensystems ab.

Text auf der y-Achse kippen

Abbildung: Text auf der y-Achse kippen.

Hinweis:
Beim Kippen von Text auf der y-Achse müssen Sie bedenken, dass die Grundlinie des Textes verwendet wird. Anders als bei grafischen Elementen ist der Nullpunkt bei Text nicht die obere linke Ecke, sondern der Schnittpunkt zwischen Grundlinie und x-Achse.

Selbstverständlich können Sie auch beide Effekte kombinieren. Das Ergebnis zeigt die nächste Abbildung. Hier wird skewY mit 20° verwendet und skewX mit 45°.

Text auf x- und y-Achse kippen

Abbildung: Text auf x- und y-Achse kippen.

   

<< zurück vor >>
Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de