SVG Tutorial

Auch das Attribut baseline-shift, das neben dem tpath-Element in diesem Kapitel behandelt wird, gehört zur Attributgruppe PresentationAttributes-TextContentElements.

• Grundlinienverschiebung - baseline-shift
• Text entlang Pfaden - das tpath-Element

baseline-shift
Voreinstellung: baseline.
Sie haben die Möglichkeit die Grundlinie eines Textes nach oben oder nach unten zu verschieben. Eine solche Grundlinienverschiebung stellen Sie mit dem Attribut baseline-shift ein.
Eine positive Längenangabe als Wert bewirkt eine Verschiebung der Grundlinie nach oben, eine negative Längenangabe als Wert bewirkt eine Verschiebung der Grundlinie nach unten.

Mit dem Element textPath können Sie einer Zeichenkette aber auch einen selbst festgelegten Pfad, siehe Pfade, als Grundlinie zuordnen. In diesem Fall verläuft der Text am Pfad entlang, wobei die Orientierung der Zeichen an den Verlauf des Pfades automatisch erfolgt.
Das Element textPath ist ein direktes Kind-Element des text-Elements.

Das textPath-Element muß einen bereits definierten Pfad referenzieren. Referenzen werden im Kapitel Dokumentstruktur II erläutert.
Damit dies möglich wird, muß dem Pfad mit Hilfe des id-Attributs ein eindeutiger Bezeichner zugeordnet werden. Daraufhin kann dieser Pfad eindeutig vom textPath-Element referenziert werden. Dies geschieht durch die Verwendung des Attributs xlink:href.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das textPath-Element</title>
<desc>Grundlinienverschiebung mit dem Attribut basline-shift
  und die Verwendung eines Pfades als Grundlinie</desc>
  <defs>
    <style type="text/css"><![CDATA[
      text {font-family:Verdana,sans-serif;
            font-size:20px;}
    ]]></style>
  </defs>

  <!-- Grundlinienverschiebung -->
  <rect x="10" y="20" width="370" height="20" fill="lightgray" />
  <text x="20" y="40">
    Grundlinienverschiebung +/- Null
  </text>
  <line x1="10" y1="40" x2="380" y2="40" stroke="red" />

  <rect x="10" y="80" width="370" height="20" fill="lightgray" />
  <text x="20" y="100" baseline-shift="10">
    Grundlinienverschiebung +10
  </text>
  <line x1="10" y1="100" x2="380" y2="100" stroke="red" />

  <rect x="10" y="140" width="370" height="20" fill="lightgray" />
  <text x="20" y="160" baseline-shift="-10">
    Grundlinienverschiebung -10
  </text>
  <line x1="10" y1="160" x2="380" y2="160" stroke="red" />

  <!-- Hintergrund und Pfad -->
  <rect x="10" y="200" width="370" height="90" fill="lightgray" stroke="black" />
  <path id="textpfad" d="M 20,255 L 100,255
                         A 70 100 0 0 0 180,255
                         A 70 100 0 0 1 260,255
                         L 370,255" fill="none" stroke="red" />

  <!-- Text am Pfad -->
  <text>
    <textPath xlink:href="#textpfad">
      Hier läuft ein Text am Pfad entlang !
    </textPath>
  </text>
</svg>
      

Die erste Zeichenkette des obigen Beispiels wird ohne Grundlinienverschiebung dargestellt. Die Grundlinien der zweiten und dritten Zeichenkette sind dagegen nach oben bzw. nach unten verschoben.

Für die vierte Zeichenkette wird zuerst ein path-Element mit dem Bezeichner textpfad im Dokument platziert. Dann wird dieser Pfad durch das Attribut xlink:href im textPath-Element referenziert.
Ergebnis: Der Pfad ist nun Grundlinie des Textes :-).