Warnung
Da ich im Moment diese Seite leider nicht mehr aktiv pflegen und auf dem neuesten Stand halten kann, können manche Informationen bereits veraltet sein. Sollten Änderungen von euch bei mir eintreffen, bin ich jedoch gerne bereit diese hier einzupflegen. Auch Leute, die sich um die Seite bzw. deren Inhalt kümmern möchten, sind gerne gesehen.
 Inhaltsverzeichnis  Texte und Schriften  Der Textpfad

5.5Der Textpfad

Im allgemeinen wird ein Text entlang einer geraden Linie geschrieben. In SVG ist es jedoch zusätzlich möglich ihn entlang eines beliebigen Pfades auszurichten. Dabei werden die Positionen und Rotationen der einzelnen Zeichen automatisch berechnet. Zur Erstellung eines Textpfades benötigt man das Element <textPath>. Dieses muß sich innerhalb eines <text>-Blocks befinden und enthält zum einen den auszurichtenden Text und zum anderen eine Referenz auf den Pfad, an dem der Text ausgerichtet werden soll.

Selbstverständlich kann ein mittels <textPath> ausgerichteter Text mit beinahe allen bisher kennengelernten Methoden manipuliert werden, d.h. man kann beispielsweise das Element <tspan> verwenden, um einzelne Textpassagen zu formatieren. Es gibt allerdings auch Ausnahmen, wie etwa das Stilelement text-decoration, das bei einem Text, der entlang eines Pfades verläuft, keine Wirkung zeigt. Die meisten Texteigenschaften wie etwa die Schriftdicke, die Schriftgröße oder der Schriftstil sind jedoch uneingeschränkt nutzbar.

Wie ein Textpfad erstellt wird, zeigt das folgende  Listing 5-16.

 Anzeigebeispiel

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="text_path" x="0" y="0" d="M10 10 C100 150 200 200 200 100 C200 100 200 20 250 20"
    fill="none" stroke="silver" />
  <text style="font-size:24px">
    <textPath xlink:href="#text_path">an einem Pfad ausgerichteter Text</textPath>
  </text>
</svg>
Listing 5-16: An einem Pfad ausgerichteter Text

 Abbildung 5-16 zeigt die dazu passende Ausgabe im SVG-Betrachter. Der Textpfad steht gewöhnlich im Definitionsabschnitt und ist somit nicht sichtbar. Im Beispiel soll er nur der Anschaulichkeit dienen.


Abbildung 5-16: Ein Text entlang eines Pfades
zum Anfang der Seitezum Ende der Seite

5.5.1Eigenschaften des Textpfades

Die Startposition eines Textes ist standardmäßig immer am Anfang des Pfades. Mit Hilfe der Eigenschaft startOffset kann die Position eines Textes aber auch verschoben werden. startOffset erwartet dafür eine Längenangabe in Form einer positiven oder negativen Zahl oder eines Prozentwertes.

Die nächste Eigenschaft bezieht sich auf den Abstand der einzelnen Zeichen. spacing heißt das dafür zuständige Attribut. Es kann die Werte exact oder auto erhalten, wobei exact als Standardwert gesetzt ist und den Viewer dazu veranlaßt, den exakten Regeln der SVG-Spezifikation zum Verhalten von Text an Pfaden zu folgen. Wurde der Wert auto gesetzt, benutzt der Viewer einen speziellen Text-an-Pfaden-Algorithmus, um die Zeichen korrekt zu setzen.

Zuletzt soll noch kurz das Attribut method angesprochen werden, das die Rendering-Methode der Textzeichen festlegt. Es kann die beiden Werte align (Standard) oder stretch besitzen. Bei align werden die Zeichen mittels Transformationen, wie etwa Translationen oder Rotationen, ausgerichtet. Die zweite Methode wandelt alle Zeichen in Pfade um, paßt die Punkte dieser Pfade an die Vektoren des Textpfades an und skaliert u.U. die Textzeichen dementsprechend. Diese Methode erlaubt etwa bessere Ergebnisse bei Schreibschriften, da durch die Biegungen der Kurve ein Auseinanderreißen der Buchstabenverbindungen korrigiert werden kann.

zum Anfang der Seite
zum vorherigen Kapitel  Das <tref>-Element
zum nächsten Kapitel  Schriftartengenerierung
 Inhaltsverzeichnis  Texte und Schriften  Der Textpfad