SVG Text - HTML lernen

Beschreibung des `<text>`-Elements

Das SVG-Element <text> definiert ein Grafikelement zur Darstellung von Text. Es wird innerhalb eines <svg>-Elements platziert und durch seine x- und y-Koordinaten positioniert. Auf <text> lassen sich genau wie bei anderen SVG-Grafikelementen Muster, Clipping-Pfade, Masken, Verläufe oder Filter anwenden. Text, der sich nicht innerhalb eines <text>-Elements befindet, wird nicht gerendert.

Hinweis: SVG-<text> bricht nicht automatisch um. Ein einzelnes <text>-Element wird in einer einzigen Zeile gerendert; der Text bricht nicht in eine neue Zeile um, wenn er den Rand des SVG-Canvas erreicht. Um Text auf mehrere Zeilen aufzuteilen, müssen die Zeilen manuell mit <tspan>-Elementen positioniert werden (jeweils mit eigener y-Koordinate), separate <text>-Elemente verwendet oder der Text mit <textPath> entlang eines Pfades geführt werden.

SVG-Text unterstützt typografische Funktionen wie Textdekorationen, die Auswahl von Schriftarten sowie die Verwendung von diskretionären, stilistischen oder historischen Ligaturen.

SVG unterstützt außerdem internationale Textverarbeitungsanforderungen:

von links nach rechts oder bidirektionaler Text,
vertikale und horizontale Ausrichtung von Text,
komplexes Text-Layout,
Glyph-Ausrichtung an verschiedenen Grundlinien.

Es ist möglich, mehrsprachigen SVG-Inhalt zu erstellen, indem verschiedene Textzeichenfolgen basierend auf der bevorzugten Sprache des Benutzers eingesetzt werden.

Zum Gestalten von Text können textspezifische CSS-Eigenschaften wie font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width und fill verwendet werden.

Beispiel des SVG-Elements `<text>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Text rotieren: `transform` vs. das `rotate`-Attribut

Es gibt zwei verschiedene Möglichkeiten, SVG-Text zu rotieren, die leicht verwechselt werden können:

transform="rotate(angle cx cy)" rotiert das gesamte <text>-Element als einen Block um einen Mittelpunkt. Die Zeichenfolge bleibt gerade; die gesamte Zeile wird geneigt.
Das rotate-Attribut rotiert jede einzelne Glyphe (jedes Zeichen) an ihrer eigenen Position. Die Buchstaben stehen in einem Winkel, aber die Textzeile verläuft weiterhin horizontal.

Das folgende Beispiel verwendet transform, um die gesamte Zeile um 40 Grad um den Punkt (30, 60) zu neigen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Das rotate-Attribut hingegen rotiert jedes Zeichen einzeln, ohne die Grundlinie zu neigen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Text ausrichten mit `text-anchor` und `dominant-baseline`

Standardmäßig markieren die x/y-Koordinaten den Anfang des Textes und liegen auf der alphabetischen Grundlinie. Zwei Attribute ändern dies:

text-anchor steuert die horizontale Ausrichtung relativ zu x. Werte: start (Standard, Text beginnt bei x), middle (Text wird um x zentriert) und end (Text endet bei x). Dies ist unverzichtbar zum Zentrieren von Beschriftungen.
dominant-baseline steuert die vertikale Ausrichtung relativ zu y. Gängige Werte: auto/alphabetic (Standard), middle, central, hanging und text-bottom. Verwenden Sie middle, um Text vertikal auf der y-Koordinate zu zentrieren.

Im nächsten Beispiel teilen alle drei Beschriftungen dasselbe x="125", aber text-anchor lässt sie unterschiedlich an der gestrichelten Referenzlinie ausrichten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

`<tspan>` für mehrere Zeilen verwenden

Das <tspan>-Element ist ein untergeordnetes Element von <text> und ermöglicht es, die Position, das Styling oder die Formatierung eines Textabschnitts zu ändern, ohne das übergeordnete <text>-Element zu verlassen. Da SVG-Text nicht umbricht, ist <tspan> die Standardmethode, um einen logischen Textblock auf mehrere Zeilen aufzuteilen: Jedem <tspan> wird ein eigenes x und y zugewiesen (oder dy zur Verschiebung relativ zur vorherigen Zeile verwendet).

Verwenden Sie <tspan> anstelle separater <text>-Elemente, wenn die Teile zusammengehören und eine gemeinsame zugängliche Beschriftung oder ein gemeinsames Styling bilden — ein <tspan> erbt die Attribute seines übergeordneten Elements und bleibt Teil desselben Textknotens. Verwenden Sie separate <text>-Elemente, wenn die Teile wirklich unabhängig voneinander sind.

Das folgende Beispiel verwendet <tspan>, um drei Zeilen zu positionieren:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Text entlang eines Pfades mit `<textPath>` platzieren

Um Text einer Kurve oder einer anderen Form folgen zu lassen, wird er in ein <textPath>-Element eingebettet und dessen href auf die id eines <path>-Elements (oder einer anderen Form) verwiesen. Der Text fließt dann entlang dieses Pfades. Definieren Sie den Pfad innerhalb von <defs>, damit er wiederverwendbar ist und selbst nicht gezeichnet wird. Informationen zur Funktionsweise von Pfaddaten (d) finden Sie im Kapitel SVG <path>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Beispiel des SVG-Elements `<text>` mit dem `<a>`-Element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Probier es selbst »

Styling und Barrierefreiheit

Text innerhalb von <text> und <tspan> wird mit textspezifischen Eigenschaften gestylt, die als Präsentationsattribute (z. B. font-size="20", font-weight="bold", font-family="Verdana") oder mit CSS gesetzt werden können. Die gebräuchlichsten sind font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (die Textfarbe) und stroke/stroke-width (der Umriss). Layout-bezogene Attribute finden Sie in der Attributtabelle weiter unten.

Barrierefreiheit: SVG-Text wird als Grafik gerendert und ist daher für unterstützende Technologien nicht immer so zugänglich wie regulärer HTML-Text. Versehen Sie aussagekräftige SVGs mit einem <title> als erstem untergeordneten Element des <svg>- (oder <text>-)Elements und fügen Sie aria-label/role="img" hinzu, damit Screenreader den Inhalt vorlesen können. Beispiel:
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Attribute

Attribut	Beschreibung
x	Gibt die Start-x-Koordinate der Textgrundlinie an.
y	Gibt die Start-y-Koordinate der Textgrundlinie an.
dx	Gibt die horizontale Verschiebung einer Textposition von einer vorherigen Textposition an.
dy	Gibt die vertikale Verschiebung einer Textposition von einer vorherigen Textposition an.
rotate	Rotiert jede einzelne Glyphe (nicht das gesamte Element — dafür `transform="rotate(...)"` verwenden).
lengthAdjust	Gibt an, wie der Text komprimiert oder gestreckt wird, um der durch das textLength-Attribut definierten Breite zu entsprechen.
textLength	Gibt die Breite an, in die der Text passen muss.
text-anchor	Gibt die horizontale Ausrichtung des Textes an: `start`, `middle` oder `end`.
dominant-baseline	Gibt die vertikale Ausrichtung des Textes auf seiner Grundlinie an (z. B. `middle`, `hanging`).
font-family	Legt die Schriftart fest, z. B. `Arial, sans-serif`.
font-size	Legt die Textgröße fest, z. B. `20` oder `1.5em`.
font-weight	Legt die Schriftstärke fest, z. B. `normal` oder `bold`.
font-style	Legt den Schriftstil fest, z. B. `normal` oder `italic`.

Das SVG-Element <text> unterstützt auch die globalen Attribute und Ereignisattribute.

Übungen

Übung

Welches Attribut zentriert SVG-Text horizontal auf seiner 'x'-Koordinate?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Beschreibung des <text>-Elements

Beispiel des SVG-Elements <text>:

Text rotieren: transform vs. das rotate-Attribut

Text ausrichten mit text-anchor und dominant-baseline

<tspan> für mehrere Zeilen verwenden

Text entlang eines Pfades mit <textPath> platzieren

Beispiel des SVG-Elements <text> mit dem <a>-Element:

Styling und Barrierefreiheit

Attribute

Übungen

Beschreibung des `<text>`-Elements

Beispiel des SVG-Elements `<text>`:

Text rotieren: `transform` vs. das `rotate`-Attribut

Text ausrichten mit `text-anchor` und `dominant-baseline`

`<tspan>` für mehrere Zeilen verwenden

Text entlang eines Pfades mit `<textPath>` platzieren

Beispiel des SVG-Elements `<text>` mit dem `<a>`-Element: