SVG-Text rechtsbünding, mittig oder zentriert: text-anchor
SVG kennt keine Ausrichtung: Wenn z.B. ein Element in einem rect-Element zentriert werden soll, muss der Taschenrechner her. Text ist – dem Himmel sei dank – meist die Ausnahme.
Die Position des Texts ist ein kritische Faktor in Elementen der Benutzeroberfläche wie Buttons, in Logos und Formeln. Da macht es einen Unterschied, ob der Text sauber sitzt oder ob die Grafik wie ein netter Versuch wirkt.
CSS zentriert Elemente anhand ihres Elternelements: so z.B. Text und Bilder in Absätzen oder Tabellenzellen. SVG hingegen positioniert Elemente nahezu immer absolut und hat nur wenige Elemente, die als Kind-Elemente agieren.
SVG text ist eines der wenigen Elternelemente, das Erziehungsaufgaben übernimmt: Das text-Element leitet Schrift, Farbe und auch die Ausrichtung seiner tspan-Kinder.
text-anchor regelt die Ausrichtung des Texts und richtet tspan-Tags innerhalb von text-Elementen zentriert, rechtsbündig und linksbündig (Default) aus.
<text text-anchor="end"> <tspan y="15" x="278">733 KB</tspan> <tspan y="35" x="278">18 MB</tspan> <tspan y="55" x="278">254,8 GB</tspan> </text> <text text-anchor="middle"> <tspan y="15" x="362">Marinde</tspan> <tspan y="35" x="362">Marie Noel Martinus</tspan> <tspan y="55" x="362">Emma Watson</tspan> </text>
alignment-baseline: Text zentriert und mittig in Form bringen
Normalerweise beginnt der Text links auf der x-Position und die y-Position bestimmt die Grundline oder Baseline, und zwar unabhängig von der Schriftgröße. CSS alignment-baseline richtet Elemente in Relation zu ihrem Eltern-Element aus.
Jetzt sind SVG-Elemente absolut positioniert, ihr Eltern-Element ist meist das SVG-Tag selbst. Selbst tspan-Tags innerhalb von text-Elementen müssen immer noch für sich selber sorgen und können sich in Hinsicht auf ihre Position nicht auf ihre Eltern verlassen.
alignment-baseline soll trotz dieser widrigen Umstände einen Text so flexibel zu setzen, dass er mit Erweiterungen, verschiedenen Schriftgrößen und bei Transformationen seinen relativen Platz behält und am Ende sogar einem Zeilenumbruch Stand hält.
<text text-anchor="middle" alignment-baseline="central"> <tspan x="110" dy="0">Rundum</tspan> </text>
Der Text sitzt zentriert im Kreis, und das auch noch, wenn eine weitere Zeile hinzukommt.
<text text-anchor="middle" alignment-baseline="central"> <tspan x="110" dy="0">Rundum</tspan> <tspan x="110" dy="1em">im Kreis</tspan> </text>
Der Mittelpunkt des Kreises bestimmt die anfängliche Position des Text-Elements (eingezeichnet als Kreuz): hier liegt die Grundlinie oder Baseline. alignment-baseline: central setzt den Text mittig zur Baseline.
- baseline
- center
- middle
- Vertikale Mitte der Oberlänge
- hanging
- Oberkante von d, t, f
- before-edge
- Unterhalb der Baseline, Majuskelhöhe
- text-before-edge
- after-edge
- Mitte der x-Höhe
- text-after-edge
- ideographic
- alphabetic
- mathematical
- inherit
Safari interpretiert den Wert baseline falsch und zentriert den Text zur Grundlinie. Ansonsten unterstützen Chrome und Safari als einzige Browser alle Werte.
Text an Pfad ausrichten
Für Text entlang eines Pfads wird nur der Pfad gebraucht. Das text-Element braucht keine x/y-Koordinaten, sondern richtet sich an den Koordinaten des Pfades aus. Allerdings kann der Text seine Lage durch ein transform ändern.
Wenn die Grafik als externe SVG-Datei mit dem img-Tag geladen wird, muss das SVG-Tag den xlink-Namespace aufführen.
xmlns:xlink="http://www.w3.org/1999/xlink"
Der Textpfad muss ein SVG path sein. circle, rect oder polyline würden nicht funktionieren. SVG beschreibt Kreise und Ellipsen nicht nur per circle und ellipse, sondern auch mit einem A oder a im d-Attribut als Kreisbogen.
Wenn der Pfad nicht geschlossen ist, würde ein überlanger Text am Ende des Pfads abbrechen.
<path id="tp1" d="m100 200a150 150 0 1 1 0 1z" stroke="orange" fill="none"/> <text> <textPath xlink:href="#tp1"> Text auf dem Kreispfad </textPath> </text> <path id="tp2" d="m900 200a150 150 0 1 0 0 1z" stroke="red" fill="none"/> <text> <textPath xlink:href="#tp2"> Text auf dem Kreispfad </textPath> </text>
Als Pfad können Kreisbögen und Ellipsen im Uhrzeigersinn (1) oder gegen den Uhrzeigersinn (0) aufgezogen werden. Im Uhrzeigersinn läuft der Text außerhalb des Kreisbogens, gegen den Uhrzeigersinn richtet sich der Text innerhalb des Pfades aus.
Sitzt das path-Element in einem defs-Tag, wird der Pfad nicht angezeigt. Alternativ kann CSS style="stroke:none; fill:none; stroke-width:0" den Pfad verbergen.
<path id="p12" d="M 95,379 A … 95,379 Z" stroke="none" fill="none" stroke-width="0" />
<text x="170" y="500" font-size="60">
<textPath xlink:href="#p12">Farbton</textPath>
</text>
SVG Text rotieren
transform = rotate() rotiert einen Text genauso wie ein Rechteck oder einen Kreis. Wenn rotate nur einfach einen Grad für die Rotation angibt, wird der Text um den Nullpunkt der ViewBox rotiert und landet dann irgendwann außerhalb der ViewBox.
<text x="50" y="25">Text rotieren</text> <text x="50" y="25" transform="rotate(75)">Text rotieren</text> <circle cx="50" cy="25" r="2" fill="red" />
transform = rotate(Winkel, Nullpunkt X, Nullpunkt Y) versetzt den Drehpunkt des Elements auf einen eigenen Nullpunkt oder Pivotpunkt.
<text x="150" y="50">Text rotieren</text>
<text x="150" y="50" transform="rotate(90,200,50)">Text rotieren 2</text>
<circle cx="200" cy="50" r="2" fill="red" />
Text vertikal ausrichten
text-orientation="upright" setzt die Zeichen in vertikalen Texten in ihre natürliche Richtung.
<style>
text {
writing-mode: vertical-rl;
text-orientation: upright;
}
</style>
Safari braucht noch ein Extra: glyph-orientation-vertical.
<text text-anchor="middle" x="50" y="150" font-size="24"
glyph-orientation-vertical="0";
style="writing-mode: vertical-rl;text-orientation: upright;">SENKRECHT</text>
Text hochstellen, tiefstellen
Ein so praktisches Tag wie sup und sub aus HTML gibt es in SVG nicht. Anstelle dessen wird das tspan-Tag für das Hochstellen bzw. Tiefstellen benutzt.
Am einfachsten und sichersten ist ein relativer Abstand zum vorangegangenen Element.
<text y="40" x="40" font-size="2em">
E = m ⋅ c<tspan dy="-20" font-size="60%">2</tspan>
</text>
Das Attribut baseline-shift funktioniert in Chrome und Safari, aber nicht in Firefox – weder baseline-shift="sub" noch baseline-shift="super" (obwohl auch Inkscape baseline-shift beim Hochstellen bzw. Tiefstellen benutzt).
<text x="10" y="25" font-size ="20">
T<tspan baseline-shift="sub">i+2</tspan>
= T<tspan baseline-shift="super">i</tspan>
+ T<tspan baseline-shift="sub">i+1</tspan>
</text>
