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
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?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 :-).
|