Lösungen zu Das Koordinatensystem von SVG-Grafiken
(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)
- Koordinatensysteme können erzeugt werden, indem das transform-Attribut auf den Tag oder eine übergeordnete Gruppe angewendet wird.
- Die SVG-Datei mit dem Quadrat sollte wie folgt aussehen:
- Um den Text neben dem Quadrat zu positionieren muss die y-Koordinate des Textes der Position der linken unteren Ecke des Quadrats entsprechen. Das sind also die y-Koordinate plus die Höhe des Quadrats:
<text x="20" y="17" style="font-size:10px">Inhalt</text>
- Um die Elemente zu gruppieren, fassen Sie sie in den <g>-Tag ein. Den Namen vergeben Sie mit dem id-Attribut.
<g id="zeile1">
<rect width="7" height="7" x="10" y="10" />
<text x="20" y="17" style="font-size:10px">Inhalt</text>
</g>
- Um die Gruppe zu positionieren, ergänzen Sie sie um das transform-Attribut:
- Eine Drehung um 30° erreichen Sie, indem Sie das transform-Attribut um die rotate-Anweisung ergänzen:
<g id="zeile1" transform="translate(30,70)">
<g id="zeile1" transform="translate(30,70) rotate(30)">
<< 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