Grafische Elemente drehen

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

Grafische Elemente lassen sich genauso einfach drehen und kippen. Als Beispiel soll dazu das SVG-Logo mit der Sichel verwendet werden. Ziel ist es, die Sichel mit dem umfließenden Text nach rechts oben zu drehen.

Da der Text um die Sichel herumfließt, muss nur die Sichel selbst gedreht werden, um auch den umfließenden Text zu drehen. Dazu müssen Sie lediglich den <path>-Tag anpassen.

<?xml version="1.0" standalone="no"?>
...
<svg width="500" height="500">
  <text x="100" y="130" style="font-family:Arial Black;font-size:46;stroke:none;fill:rgb(0,0,255)">SVG</text>
  <path id="sichel" transform="rotate(-10) translate(-30,30)" d="M130 80 Q333 96 215 135 Q315 96 130 80" style="stroke:rgb(0,0,0);stroke-width:1;fill:rgb(0,0,139)"/>
  <text style="alignment-baseline:text-bottom;baseline-shift:5;font-family:Arial;font-size:11;fill:darkblue">
    <textPath xlink:href="#sichel" startOffset="5">Scalable Vector Graphics</textPath>
  </text>
</svg>

Auch hier müssen Sie nach der Drehung aber die Position des Objekts anpassen, weil um den Nullpunkt, also die linke obere Ecke der Sichel, gedreht wird. Daher bewegt sie sich vom Textelement "SVG" weg, was durch den translate-Befehl korrigiert wird.

Hinweis:
In der folgende Grafik wird die ursprüngliche Lage der Sichel im Hintergrund heller dargestellt. Die neue Lage liegt vorne.

Die Sichel mit Text vor und nach der Drehung

Abbildung: Die Sichel mit Text vor und nach der Drehung.

   

<< 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