SVG Text alignment: Zentrieren

Text ausrichten – alignment-baseline

Text in SVG wird mit text-anchor und alignment-baseline zentriert und mittig gesetzt, aber Text in SVG ist immer etwas unwillig (immerhin geht es ja um Grafik).

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

BUTTON

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.

SVG Text und tspan ausrichten
SVG Text und tspan ausrichten: linksbündig, mittig, zentriert
<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.

Erklärung zu baseline, x-Höhe, H-Linie

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 Central
Hanging Ideographic
Mathematical Alphabetic
Before-edge After-edge
Text-Before-edge Text-After-edge
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"
Text auf Pfad laufen lassen
Text mit textPath an einen Pfad anpassen

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.

svg textpath Text an Pfad ausrichten
<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 mit CSS style

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.

SVG text transform=rotate
<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.

SENKRECHT
CSS writing-mode
<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.

E = m ⋅ c 2
<text y="40" x="40" font-size="2em">
    E = m ⋅ c<tspan dy="-20" font-size="60%">2</tspan>
</text>
Ti+2 = Ti + Ti+1

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>

Quelle: Stackoverflow