SVG-Text – Elemente text, tspan und textPath

SVG kann drei Hauptarten grafischer Inhalte rendern: Vektorformen, Bilder und Text. SVG-Text ist nicht einfach nur Schrift auf einer Zeichenfläche. Er kann mit Koordinaten positioniert, mit CSS oder presentation attributes gestylt, transformiert, beschnitten und entlang eines path platziert werden. Dieser Artikel erklärt, wie Text im SVG-Markup geschrieben und angeordnet wird.

In diesem Artikel lernen Sie:

<text> zu verwenden, um SVG-Text an einer bestimmten baseline-Position zu platzieren.
<tspan> für mehrzeiligen SVG-Text und inline styling zu verwenden.
<textPath> zu verwenden, damit Text einer path-Kurve folgt.
Textausrichtung, Schreibrichtung, writing mode, textLength und glyph spacing zu steuern.
Den Unterschied zwischen characters, glyphs und fonts zu verstehen.

Was sind Glyphen, Fonts und Zeichen?

Glyphe – die visuelle Darstellung eines Zeichens innerhalb einer Schriftart. Eine Glyphe wird durch eine oder mehrere Formen definiert, oft durch paths, und kann zusätzliche Rendering-Hinweise enthalten.
Font – eine Sammlung von Glyphen mit gemeinsamem Design. Vektorfonts speichern Glyphenkonturen als skalierbare Geometrie, sodass Text ohne Schärfeverlust vergrößert werden kann.
Zeichen – der abstrakte Codepunkt, zum Beispiel Unicode, den ein Programm einer Glyphe in einem Font zuordnet. Zeichen werden entlang einer gedachten baseline angeordnet, die je nach Schriftsystem horizontal oder vertikal sein kann.

Das Verständnis der Beziehung zwischen Zeichen, Glyphen und Fonts ist wichtig, wenn SVG-Text präzise gerendert werden soll.

SVG-Textinhaltselemente

SVG definiert drei Inhaltselemente, die sichtbaren Text erzeugen:

Element	Zweck
`<text>`	Definiert einen Textblock.
`<tspan>`	Ermöglicht feine Positionierung und Styling innerhalb von `<text>`.
`<textPath>`	Richtet Text entlang einer `<path>`-Kurve aus.

So fügen Sie Text zu SVG hinzu

Erstellen Sie ein <text>-Element innerhalb des <svg>-Dokuments.
Setzen Sie die Attribute x und y, um die baseline des Textes zu positionieren.
Fügen Sie font- und painting-Attribute wie font-family, font-size, fill oder stroke hinzu.
Verwenden Sie <tspan>-Elemente, wenn ein Textblock mehrere Zeilen oder gemischtes Styling benötigt.
Verwenden Sie <textPath>, wenn Text einem path statt einer geraden baseline folgen soll.
Prüfen Sie viewport, baseline und font size, wenn Text abgeschnitten wird.

SVG `<text>`-Element

Das <text>-Element erstellt einen Textlauf. Die Attribute x und y positionieren den Start der Text-baseline, nicht die obere linke Ecke einer Textbox. Da die baseline nahe am unteren Rand der Buchstaben liegt, kann ein kleiner y-Wert einen Teil des Textes über den viewport setzen. In der Praxis sollte y groß genug für das gewählte font-size sein.

Das folgende Beispiel zeigt, warum die baseline-Position wichtig ist. Der erste Text verwendet einen sehr kleinen y-Wert, deshalb werden die Buchstaben abgeschnitten. Der zweite Text verschiebt die baseline nach unten und ist vollständig sichtbar ( svg-text-position.svg).

1<svg height="100" width="200" xmlns="http://www.w3.org/2000/svg">
2    <text x="10" y="6" fill="red">The text is not fully visible </text>
3    <text x="10" y="30" fill="green">The text is fully visible </text>
4</svg>

Beispiel für SVG-Textpositionierung mit abgeschnittenem und vollständig sichtbarem Text

Die Attribute von <text> und <tspan> steuern Schreibrichtung, Ausrichtung, Font, Abstände und Zeichenpositionierung. Die häufigsten Attribute sind:

x, y – absolute Koordinaten des baseline-Starts.
dx, dy – relative Verschiebungen für einzelne Zeichen.
rotate – Drehwinkel, der auf jedes Zeichen angewendet wird.
textLength – zwingt den gerenderten Text auf eine bestimmte Länge.
lengthAdjust – steuert, wie spacing und glyph scaling an textLength angepasst werden (spacing, spacingAndGlyphs).
text-anchor – Ausrichtung des Textes relativ zur x-Koordinate (start, middle, end).
writing-mode – setzt die Textflussrichtung (lr, rl, tb, bt).

Diese Attribute können kombiniert werden, um komplexe Layouts zu erstellen, etwa gestreckten Text, Rechts-nach-links-Schrift oder vertikales Schreiben.

1<svg height="300" width="400" xmlns="http://www.w3.org/2000/svg">
2    <text x="180" y="30" fill="red">Aspose.SVG</text>
3    <text x="180" y="60" fill="blue" textLength="140">Aspose.SVG</text>
4    <text x="180" y="90" fill="grey" textLength="160" lengthAdjust="spacingAndGlyphs"
5          style="direction: rtl; unicode-bidi: bidi-override">Aspose.SVG</text>
6    <text x="180" y="120" fill="green" style="text-anchor: middle">Aspose.SVG</text>
7    <text x="260" y="90" style="writing-mode: tb">Aspose.SVG</text>
8</svg>

SVG-Textanordnung mit textLength, text-anchor, Rechts-nach-links-Richtung und vertikalem Schreiben

Der rote Text verwendet das Standardverhalten text-anchor:start.
Der grüne Text zentriert den Text mit text-anchor:middle.
Der graue Text demonstriert Rechts-nach-links-Richtung mit direction:rtl.
Der blaue und der graue Text zeigen, wie textLength und lengthAdjust glyphs strecken.
Der vertikale Text verwendet writing-mode:tb, also top-to-bottom.

`<tspan>` – Inline Styling und Zeilenumbrüche

<tspan> kann in <text> oder in einem anderen <tspan> verschachtelt werden. Als Kindelement erfüllt <tspan> mehrere wichtige Aufgaben bei Anzeige und Formatierung von Text:

SVG-Text bricht nicht automatisch in eine neue Zeile um. Verwenden Sie <tspan>-Elemente, um getrennte Zeilen zu erstellen und jeder Zeile eine eigene Position zu geben.
Verwenden Sie <tspan>, wenn nur ein Teil eines Textblocks einen anderen Stil, eine andere Position, Farbe, Schriftgröße oder Schriftstärke benötigt.

1<svg height="300" width="600" xmlns="http://www.w3.org/2000/svg">
2    <text x="20" y="60" style="font-family:arial">
3        <tspan style="font-weight:bold; font-size:55px">ASPOSE</tspan>
4        <tspan x="50" y="90" style="font-size:20px; fill:grey">Your File Format APIs </tspan>
5    </text>
6</svg>

SVG-tspan-Beispiel mit mehrzeiligem Text, unterschiedlichen Schriftgrößen und fill-Farben

x und y auf einem <tspan> beginnen eine neue Zeile an den angegebenen Koordinaten.
Inline-style-Properties wie font-weight, font-size und fill wirken nur auf dieses <tspan>.

SVG `<textPath>` – Text entlang einer Kurve

<textPath> bindet Text an ein <path>-Element, sodass Zeichen einer beliebigen Vektorkurve folgen können. Der path kann auf zwei Arten referenziert werden:

href oder xlink:href – verweist über seine id auf einen <path>.
path – gibt die SVG path data direkt im Attribut an.

 1<svg height="300" width="800" xmlns="http://www.w3.org/2000/svg">
 2    <path id="my_path1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100"
 3          fill="transparent" />
 4    <path id="my_path2" d="M 50 100 Q 25 10 180 100 T 350 100"
 5          transform="translate(0,75)" fill="transparent" />
 6    <text>
 7        <textPath href="#my_path1">
 8            Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
 9        </textPath>
10        <textPath href="#my_path2">
11            Aspose.SVG for .NET is a flexible library for SVG file processing and is fully compatible with its specifications.
12        </textPath>
13    </text>
14</svg>

SVG-textPath-Beispiel mit Text, der zwei gekrümmten paths folgt

Wenn der path kürzer als der Text ist, wird der überstehende Text am Ende des path abgeschnitten. Styling funktioniert wie bei normalem Text: CSS-properties wie font-weight, font-style, text-decoration und text-transform können angewendet werden.

Die Illustration zeigt zwei Textzeichenfolgen, die an zwei unterschiedliche paths gebunden sind. Die erste Zeile folgt einem langen wellenförmigen path, während die zweite früher endet, weil der referenzierte path kürzer ist.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Text wird oben im viewport abgeschnitten	`y`-Wert ist kleiner als die Schriftgröße	Setzen Sie `y` größer als die Schriftgröße, zum Beispiel `y="30"` für 24-px-Text
Text folgt der Kurve nicht wie erwartet	`href` verweist auf eine nicht vorhandene `<path>`-ID	Prüfen Sie die `<path>`-`id` und stellen Sie sicher, dass der `href`-Wert exakt übereinstimmt
Glyphs wirken verzerrt	`lengthAdjust` steht auf `spacing`, während `textLength` verwendet wird	Verwenden Sie `lengthAdjust="spacingAndGlyphs"`, um spacing und glyphs zu skalieren
Rechts-nach-links-Text wird weiterhin links nach rechts angezeigt	`unicode-bidi:bidi-override` fehlt	Fügen Sie `style="direction: rtl; unicode-bidi: bidi-override"` zu `<text>` oder `<tspan>` hinzu
Text bricht nicht in eine neue Zeile um	Automatischer Umbruch wird erwartet	Fügen Sie für jede Zeile ein neues `<tspan>` mit eigenen `x`-/`y`-Koordinaten ein

Schnelle Rezepte

Ziel	SVG-Snippet zum Kopieren
Text horizontal zentrieren	`<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Centered</text>`
Vertikaler Text, oben nach unten	`<text x="20" y="20" writing-mode="tb">Vertical</text>`
Text auf exakte Breite strecken	`<text x="10" y="40" textLength="200" lengthAdjust="spacingAndGlyphs">Stretch me</text>`
Text auf einer Kurve platzieren	`<path id="curve" d="M10,80 C40,10 65,10 95,80" fill="none"/> <text><textPath href="#curve">On a curve</textPath></text>`
Unter- und Überstreichung anwenden	`<text x="10" y="40" style="text-decoration: underline overline;">Styled</text>`

FAQ – SVG-Text

Wie positioniere ich SVG-Text?

Setzen Sie die Attribute x und y auf einem <text>-Element. Der y-Wert positioniert die baseline, deshalb muss er normalerweise größer als die Schriftgröße sein, damit der Text oben im viewport nicht abgeschnitten wird.

Wie erstelle ich mehrzeiligen SVG-Text?

Verwenden Sie mehrere <tspan>-Elemente innerhalb eines <text>-Elements. Geben Sie jeder Zeile eigene x- und y-Werte oder verwenden Sie dy, um jede Zeile relativ zur vorherigen zu verschieben.

Kann SVG-Text einer Kurve folgen?

Ja. Definieren Sie einen <path> mit einer id und referenzieren Sie ihn dann mit <textPath href="#path-id">. Der Text folgt der path-Geometrie und kann weiterhin mit textbezogenen CSS-properties gestylt werden.

Kann ich SVG-Text in Vektorkonturen umwandeln?

Ja. Text kann in vector paths umgewandelt werden, wenn Sie font-unabhängige Ausgabe benötigen. Siehe Text Vectorization & Text Security – .NET und SVG-Text in Python zu Vector konvertieren.

Spezifikation und verwandte Ressourcen

Der SVG-Spezifikationsabschnitt zu text elements definiert das Verhalten von <text>, <tspan> und <textPath>.
Verwenden Sie Füllung und Kontur in SVG, um SVG-Text mit fill, stroke, opacity und paint properties zu stylen.
Öffnen Sie SVG Path Data, wenn Sie den path verstehen möchten, der von <textPath> verwendet wird.
Siehe Working with Fonts and Text für .NET API-Beispiele, die fonts, glyphs und text rendering behavior untersuchen.
Siehe SVG-Text in Python zeichnen für Python via .NET-Beispiele, die <text>-Elemente erstellen und SVG-Text programmgesteuert stylen.
Verwenden Sie Convert Text to Vector, wenn SVG-Text in Vektorkonturen umgewandelt werden muss.
Verwenden Sie SVG-Datei bearbeiten für .NET API-Beispiele, die SVG-Elemente programmgesteuert erstellen und bearbeiten.

SVG Path Data Grundlegende SVG-Transformationen