Einzelne Zeichen in einem Text formatieren

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

Der <tspan>-Tag ermöglicht es Ihnen, einzelne Zeichen in einem <textPath>- oder <text>-Tag unterschiedlich zu formatieren. Er ist damit in etwas vergleichbar mit dem <span>-Tag von HTML. Hier dient er jedoch nur zur Formatierung von Texten. Andere Elemente können darin nicht verwendet werden.

Der <tspan>-Tag kann innerhalb der Tags <text> oder <textPath> verwendet werden. Das folgende Listing benutzt ihn, um die Buchstaben S, V und G im zuvor erstellten Logo größer und in Rot darzustellen.

<?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" 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"><tspan style="fill:red;font-size:16">S</tspan>calable <tspan style="fill:red;font-size:16">V</tspan>ector <tspan style="fill:red;font-size:16">G</tspan>raphics</textPath>
  </text>
</svg>

Die gesondert zu formatierenden Zeichen des Textes müssen Sie einfach in <tspan> und </tspan> einfassen. Über das style-Attribut des Tags geben Sie dann die Formatierung an. Der Text nach dem schließenden Tag wird wieder mit den Formatierungen des übergeordneten Tags versehen.

Der Vorteil des <tspan>-Tags besteht darin, dass Sie den gesamten Text ansonsten einheitlich formatieren können und nur im Ganzen positionieren müssen. Wenn Sie einen Text mit sehr vielen unterschiedlichen Formatierungen verwenden möchten, müssten Sie ansonsten zahlreiche <text>-Tags erstellen, die alle einzeln positioniert werden müssen. Das ist sehr aufwändig. Nicht nur, dass Sie sehr viel Code eingeben müssen, Positionierungen kosten auch Zeit beim Aufbau der Grafik. Je mehr Positionen gesetzt werden müssen, desto länger dauert das Rendern der Grafik. Das hinterlässt beim Benutzer den Eindruck, dass die Grafik sehr lange für die Übertragung braucht, auch wenn das tatsächlich nicht der Fall ist.

Das Ergebnis des vorherigen Listings sieht wie folgt aus:

Unterschiedliche Formatierungen für einzelne Zeichen mit dem tspan-Tag

Abbildung: Unterschiedliche Formatierungen für einzelne Zeichen mit dem tspan-Tag.

Der <tspan>-Tag verfügt neben dem Unversalattribut style über die Attribute x, y, dx, dy, rotate und textLength.

Mit x und y können Sie die Position der Zeichen bestimmen. Dazu können Sie sowohl einzelne Werte festlegen, als auch eine kommagetrennte Werteliste. Geben Sie einen einzelnen Wert an, bestimmt dieser die absolute vertikale bzw. horizontale Position des ersten Zeichens. Wenn Sie eine Werteliste angeben, können Sie damit die Positionen der einzelnen Zeichen angeben. Jeder Wert wird dann nacheinander einem Zeichen zugewiesen, bis die Werteliste zu Ende ist. Die Anweisung

<text x="10" y="80" style="fill:black;font-size:20;font-family:Arial">Die <tspan y="76,72,68,64,64,68,72,76">Webseite</tspan> zum Buch</text>

erzeugt durch Setzen des y-Attributs folgende Ausgabe:

Interessante Effekte durch Positionieren einzelner Buchstaben

Abbildung: Interessante Effekte durch Positionieren einzelner Buchstaben mit dem y-Attribut.

Sie können natürlich gleichzeitig zum y-Attribut auch eine Werteliste für das x-Attribut bestimmen. In diesem Fall werden die einzelnen Werte paarweise zu x/y-Koordinaten zugeordnet und verwendet.

Die Attribute dx und dy bestimmen hingegen die relative Position der Zeichen. Sie können auch hier entweder einen einzelnen Wert oder eine Werteliste definieren. Die Anwendung zeigt folgendes Beispiel. Zusätzlich zu dem y-Attribut wird die horizontale Position der Zeichen mit dem dx-Attribut variiert.

<text x="10" y="80" style="fill:black;font-size:20;font-family:Arial">Die <tspan y="76,72,68,64,64,68,72,76" dx="2,4,8,16,16,8,4,2">Webseite</tspan> zum Buch</text>

Das Ergebnis sieht dann folgendermaßen aus:

Dynamische Verzerrung der Buchstaben mit dem dx-Attribut

Abbildung: Dynamische Verzerrung der Buchstaben mit dem dx-Attribut.

Mit dem Attribut rotate können Sie den mit <tspan> umfassten Textbereich drehen. Auch hier können Sie wieder einen einzelnen Wert oder eine Werteliste angeben. Der Wert oder die Wertliste definieren die Gradzahl der Drehung. Bei einer Drehung von 180° wird der Text somit an der linken unteren Ecke des Zeichens gespiegelt.

Hinweis:
Laut Dokumentation des SVG-Standards werden alle überzähligen Zeichen mit dem letzten Wert der Liste gedreht, wenn Sie weniger Werte angeben, als Zeichen vorhanden sind. Das würde bedeuten, wenn Sie nur einen Wert angeben, werden alle Zeichen des Textes mit diesem Wert gedreht. Der Adobe SVG-Viewer dreht in diesem Fall aber nur das erste Zeichen. Um einen einheitliche Drehung aller Zeichen zu erreichen, müssten Sie also eine Werteliste mit ausreichend Werten verwenden.

Die Anweisung

<text x="10" y="80" style="fill:black;font-size:20;font-family:Arial">Die <tspan y="76,72,68,64,64,68,72,76" dx="2,4,8,16,16,8,4,2">Webseite</tspan> zum <tspan rotate="180,180,180,180">Buch</tspan></text>

sorgt daher für folgende Ausgabe:

Die erzeugte Drehung um 180°

Abbildung: Die erzeugte Drehung um 180°.

Hinweis:

Die unschöne Verschiebung des gedrehten Wortes zum übrigen Text hin kommt daher, dass die Zeichen um ihre untere linke Ecke gedreht werden. Sie können dies aber ausgleichen, indem Sie zusätzlich das dx-Attribut verwenden, um den Text etwas nach rechts zu schieben.

Zuletzt gibt es noch das Attribut textLength. Es bestimmt die Länge des Textes, wird aber vom SVG-Viewer nicht unterstützt. Erwartet wird ein Wert, der die Textlänge in der angegebenen Maßeinheit oder in Pixel bestimmt.

   

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