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

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 – eine Ausnahme.

18-12-15 SITEMAP TUTORIALS

SVG-Text rechtsbünding oder mittig ausrichten und zentrieren: text-anchor

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: rechtsbü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"
SVG Text an einen Pfad anpassen

Der Textpfad muss ein SVG path sein. circle, rect oder polyline würden nicht funktionieren.

Wenn der Pfad nicht geschlossen ist, würde ein überlanger Text am Ende des Pfads abbrechen.

<svg height="100%" width="100%" viewBox="0 0 600 400">
   <defs>
      <path id="textpath" d="m448 200a150 150 0 0 1 -150 150 150 150 0 0 1 -150 -150 150 150 0 0 1 150 -150 150 150 0 0 1 150 150z"/>
   </defs>
   <text transform="rotate(-45 300 200)">
      <textPath xlink:href="#textpath" >
         Text auf dem
      </textPath>
   </text>
   <text transform="rotate(-185 300 200)">
      <textPath xlink:href="#textpath" >
         rechten Pfad
      </textPath>
   </text>
   <circle cx="300" cy="200" r="2"/>
</svg>

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.

<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 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 = "sub">i</tspan>
    + T<tspan baseline-shift = "sub">i+1</tspan>
</text>

Quelle: Stackoverflow

Stulpenhandschuhe.pdf Berlin Emma Erste Schritte.pdf Grömitz 733 KB 18 MB 254,8 GB 3 KB 10,6 MB Marinde Marie Noel Martinus Emma Watson W. Winter Alice 278 362 Text auf dem Kreispfad Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren 2 Text rotieren